Vue组件基础
組件
組件基礎
組件相當于一個小的Vue對象，也有Vue的生命周期。
父組件往子組件傳值
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href=""><script src="./Vue/vue.js"></script> </head><body><div id="app"><!-- 將父組件的值傳給子組件 v-bind:product="item" 將遍歷出來的值 傳給 子組件props中的product --><product-com v-for="item,index in proList" v-bind:product="item"></product-com></div></body> <script>Vue.component("product-com", {template: `<li><h3>{{product.title}}</h3><h4>{{product.price}}</h4><p>{{product.brief}}</p></li>`,props: ['product'] //相當于屬性列表})//根組件let app = new Vue({el: "#app",data: {proList: [{title: "產品1",price: "10",brief: "產品描述1"}, {title: "產品2",price: "10",brief: "產品描述2"}, {title: "產品3",price: "10",brief: "產品描述3"}, {title: "產品4",price: "10",brief: "產品描述4"}]}}) </script></html>子組件給父組件傳值
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href=""><script src="./Vue/vue.js"></script> </head><body><div id="app"><product-com v-for="item,index in schools" v-bind:school="item" @getschoolname="getname"></product-com><h2>選中的學校是：{{schoolname}}</h2></div></body> <script>Vue.component("product-com", {template: `<li><h3>{{school}}</h3><button @click="schoolname(school)">學校</button></li>`,props: ['school'],methods: {schoolname: function(schoolname1) {console.log(schoolname1)console.log(this)//this 中有所有的屬性和方法//通過 $emit("事件名稱",參數)//調用 v-on:事件名稱="父組件的函數" 然后參數會傳入父組件的函數中，然后就可以給父組件的屬性賦值了//如 @getschoolname="getname"this.$emit("getschoolname", schoolname1)}}})//根組件let app = new Vue({el: "#app",data: {schools: ["清華", "北大"],schoolname: ""},methods: {getname: function(schoolname) {this.schoolname = schoolname}}}) </script></html>第二種子組件給父組件傳值
可以通過父組件給子組件傳遞函數對象來使子組件調用父組件的函數對象（由于this指向是固定的！）
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href=""><script src="./Vue/vue.js"></script> </head><body><div id="app"><product-com v-for="item,index in schools" v-bind:school="item" :methodobject="getname"></product-com><h2>選中的學校是：{{schoolname}}</h2></div></body> <script>Vue.component("product-com", {template: `<li><h3>{{school}}</h3><button @click="schoolname(school)">學校</button></li>`,props: ['school', 'methodobject'],methods: {schoolname: function(schoolname1) {console.log(schoolname1)console.log(this) //這邊的是Vuecomponent 子組件this.methodobject(schoolname1) //這邊的this綁定的是父組件//通過 $emit("事件名稱",參數)//調用 v-on:事件名稱="父組件的函數" 然后參數會傳入父組件的函數中，然后就可以給父組件的屬性賦值了//this.$emit("getschoolname", schoolname1)}}})//根組件let app = new Vue({el: "#app",data: {schools: ["清華", "北大"],schoolname: ""},methods: {getname: function(schoolname) {console.log(this)this.schoolname = schoolname// console.log(this.schoolname)}}}) </script></html>通過子組件通過$parent屬性找到父組件的Vue對象
$parent 父組件 $root 根組件 $children 子組件
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href=""><script src="./Vue/vue.js"></script> </head><body><div id="app"><product-com v-for="item,index in schools" v-bind:school="item"></product-com><h2>選中的學校是：{{schoolname}}</h2></div></body> <script>Vue.component("product-com", {template: `<li><h3>{{school}}</h3><button @click="schoolname(school)">學校</button></li>`,props: ['school', 'methodobject'],methods: {schoolname: function(schoolname1) {console.log(schoolname1)console.log(this) //這邊的是Vuecomponent 子組件//通過父組件this.$parent.getname(schoolname1)}}})//根組件let app = new Vue({el: "#app",data: {schools: ["清華", "北大"],schoolname: ""},methods: {getname: function(schoolname) {console.log(this)this.schoolname = schoolname// console.log(this.schoolname)}}}) </script></html>在組件上使用 v-model
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href=""><script src="./Vue/vue.js"></script> </head><body><div id="app"><input-com v-model="username"></input-com><h1>{{username}}</h1></div> </body> <script>Vue.component("input-com", {template: `<input type="text" v-bind:value="value" @input="$emit('input',$event.target.value)" >`,props: ['value']})var app = new Vue({el: "#app",data: {username: ""},methods: {}}) </script></html>下面是官方文檔
當用在組件上時，v-model 則會這樣：
<custom-inputv-bind:value="searchText"v-on:input="searchText = $event" ></custom-input>為了讓它正常工作，這個組件內的 <input> 必須：
- 將其 value attribute 綁定到一個名叫 value 的 prop 上
- 在其 input 事件被觸發時，將新的值通過自定義的 input 事件拋出
寫成代碼之后是這樣的：
Vue.component('custom-input', {props: ['value'],template: `<inputv-bind:value="value"v-on:input="$emit('input', $event.target.value)">` })現在 v-model 就應該可以在這個組件上完美地工作起來了：
<custom-input v-model="searchText"></custom-input>插槽
和 HTML 元素一樣，我們經常需要向一個組件傳遞內容
新版本已經棄用了<slot></slot>！ 新版本使用 v-slot
在template模板中加入<slot></slot>，則會將在組件標簽內部的html加入到<slot></slot>中，<slot></slot>中只能使用父元素的屬性！
例如：
和 HTML 元素一樣，我們經常需要向一個組件傳遞內容，像這樣：
<alert-box>Something bad happened. </alert-box>可能會渲染出這樣的東西：
Error! Something bad happened.
幸好，Vue 自定義的 <slot> 元素讓這變得非常簡單：
Vue.component('alert-box', {template: `<div class="demo-alert-box"><strong>Error!</strong><slot></slot></div>` })如你所見，我們只要在需要的地方加入插槽就行了——就這么簡單！
動態組件
可以使用 <component v-bind:is="組件名" ></component> 標簽來指定組件
<!DOCTYPE html> <html><head><title>Dynamic Components Example</title><script src="./Vue/vue.js"></script><style>.tab-button {padding: 6px 10px;border-top-left-radius: 3px;border-top-right-radius: 3px;border: 1px solid #ccc;cursor: pointer;background: #f0f0f0;margin-bottom: -1px;margin-right: -1px;}.tab-button:hover {background: #e0e0e0;}.tab-button.active {background: #e0e0e0;}.tab {border: 1px solid #ccc;padding: 10px;}</style> </head><body><div id="dynamic-component-demo" class="demo"><button v-for="tab in tabs" v-bind:key="tab" v-bind:class="['tab-button', { active: currentTab === tab }]" v-on:click="currentTab = tab">{{ tab }}</button>//:is=“組件名” 屬性 動態指定組件<component v-bind:is="currentTabComponent" class="tab"></component></div><script>Vue.component("tab-home", {template: "<div>Home component</div>"});Vue.component("tab-posts", {template: "<div>Posts component</div>"});Vue.component("tab-archive", {template: "<div>Archive component</div>"});new Vue({el: "#dynamic-component-demo",data: {currentTab: "Home",tabs: ["Home", "Posts", "Archive"]},computed: {currentTabComponent: function() {return "tab-" + this.currentTab.toLowerCase();}}});</script> </body></html>總結
- 上一篇： 多线程分段下载文件
- 下一篇： WIN10自带远程桌面实现多用户登录