組件的嵌套

在Vue的設(shè)計中，一切都可以看作組件。整個頁面可以看作是一個根組件，內(nèi)部的各塊組件可以看作子組件。組件之間自然的會發(fā)生嵌套關(guān)系。

接下來，我們看一下組件嵌套的示例：

<div id="app"><my-table></my-table> </div><template id="table-head"><thead><tr><th>id</th><th>name</th><th>age</th><th>gender</th></tr></thead> </template><template id="table-body"><tbody><tr v-for="u in users" :key="u.id"><td>{{u.id}}</td><td>{{u.name}}</td><td>{{u.age}}</td><td>{{u.gender}}</td></tr></tbody> </template><template id="my-table"><table border="1" align="center"><thead is="table-head"></thead><tbody is="table-body"></tbody></table> </template> <script>var tableHead = {template:"#table-head"}var tableBody = {template:"#table-body",data:function(){return {users: [{"id":1, "name": "小明", "age": 13, "gender": "男"},{"id":2, "name": "小紅", "age": 13, "gender": "女"},{"id":3, "name": "小綠", "age": 4, "gender": "男"}]}}}//使用局部注冊，需要將子組件注冊到父組件中var myTable ={template:"#my-table",components:{"table-head":tableHead,"table-body":tableBody}}const vm = new Vue({el:"#app",components:{"my-table":myTable}}); </script>

說明：事實上，雖然 new Vue() 沒有顯式的使用組件的語法，但它本質(zhì)上也是一個父組件。

組件通信

通常一個較為復(fù)雜的頁面，一定會出現(xiàn)組件的嵌套。各個組件之間以嵌套的關(guān)系組合在一起，那么這個時候不可避免的會有組件間通信的需求。

1. 父傳子：props

通常父組件的模板中包含子組件，父組件要正向地向子組件傳遞數(shù)據(jù)或參數(shù)，子組件接收到后根據(jù)參數(shù)的不同來渲染不同的內(nèi)容或執(zhí)行操作。這個正向傳遞數(shù)據(jù)的過程就是通過props來實現(xiàn)的。

比如在之前的表格案例中，table-body子組件展示的數(shù)據(jù)是定義在子組件自個身上的，這么做雖有效果，但降低了該組件的復(fù)用價值，更好的做法：子組件中不定義數(shù)據(jù)，而是由使用它的父組件傳遞。此時，需要使用 props完成父組件向子組件的數(shù)據(jù)傳遞。

語法：
//1.定義子組件中添加props屬性
const 組件 = {
template:“html片段”,
props:[“自定義參數(shù)名”,…]
}
//2 使用組件時，為組件添加 自定義參數(shù)名 同名的屬性
<組件 :自定義參數(shù)名=”值"></組件>

例子：

<div id="app"><my-table :us="users"></my-table> </div><template id="my-table"><table border="1" align="center"><thead><tr><th>id</th><th>name</th><th>age</th><th>gender</th></tr></thead><tbody><tr v-for="u in us" :key="u.id"><td>{{u.id}}</td><td>{{u.name}}</td><td>{{u.age}}</td><td>{{u.gender}}</td></tr></tbody></table></template><script>var myTable = {template:"#my-table",props:["us"]}const vm = new Vue({el:"#app",data:{users: [{"id":1, "name": "小明", "age": 13, "gender": "男"},{"id":2, "name": "小紅", "age": 13, "gender": "女"},{"id":3, "name": "小綠", "age": 4, "gender": "男"}]},components:{"myTable":myTable}}); </script>

2. 子傳父：$emit

父組件的模板中包含子組件，那么經(jīng)常會出現(xiàn)子組件的狀態(tài)發(fā)生變化時，要通知到父組件。所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，但是反過來則不行。如下所示：

代碼如下：

<div id="app"><h2>{{num}}</h2><!-- 父組件向子組件傳遞數(shù)據(jù) count=num 子組件中修改count值，不能修改父組件的num --><counter :count="num"></counter> </div><script>Vue.component("counter",{template:` <div> <button @click="increment">點我自增</button> <span>{{count}}</span> <button @click="decrement">點我自減</button></div>`,props:["count"],methods:{increment(){this.count++;},decrement(){this.count--;}}})const vm = new Vue({el:"#app",data:{num:0}}) </script>

所以，當需要子傳父的時候，Vue采用事件放射的方式完成。

• 在子組件中執(zhí)行 $emit(“父組件的自定義事件”)通知父組件，并發(fā)送數(shù)據(jù)
• 父組件中定義自定義事件處理函數(shù)，并接收數(shù)據(jù)

<div id="app"><h2>{{num}}</h2><!-- 2 綁定自定義事件處理函數(shù)，監(jiān)聽子組件的事件觸發(fā) change-count當子組件觸發(fā)事件后，執(zhí)行handleChange事件處理函數(shù)，$emit發(fā)送的數(shù)據(jù)將成為handleChange的實參--><counter :count="num" @change-count="handleChange"></counter> </div><script>Vue.component("counter",{template:`<div><button @click="increment">點我自增</button><span>{{count}}</span><button @click="decrement">點我自減</button></div>`,props:["count"],methods:{increment(){this.count++;//1 子組件中通過$emit觸發(fā)父組件中的自定義事件，并發(fā)送數(shù)據(jù)this.$emit("change-count",this.count);},decrement(){this.count--;//1 子組件中通過$emit觸發(fā)父組件中的自定義事件，并發(fā)送數(shù)據(jù)this.$emit("change-count",this.count);}}})const vm = new Vue({el:"#app",data:{num:0},methods:{handleChange(value){this.num = value;}}}) </script>

實戰(zhàn)案例

代碼如下：

<div id="app"><div><my-table :us="users" @show-user="handleShowUser"></my-table><hr><update-form :u="user" @update-user="handleUpdateUser"></update-form></div> </div> <template id="my-table"><table border="1"><thead><tr><th>id</th><th>name</th><th>age</th><th>operation</th></tr></thead><tbody><tr v-for="(u,index) in us" :key="u.id"><td>{{u.id}}</td><td>{{u.name}}</td><td>{{u.age}}</td><td><button @click="emitShowUser(u)">更新</button></td></tr></tbody></table> </template> <template id="update-form"><form action="" @submit.prevent="emitUpdateUser"><input type="hidden" v-model="u.id" >用戶名: <input type="text" v-model="u.name"> <br>年齡: <input type="number" v-model="u.age"> <br><input type="submit" value="更新"></form> </template><script>const updateForm = {template:"#update-form",props:["u"],methods:{emitUpdateUser(){this.$emit("update-user",this.u);}}};const myTable = {template:"#my-table",props:["us"],methods:{emitShowUser(u){this.$emit("show-user",u);}}};const vm = new Vue({el:"#app",data:{users:[{id:1,name:"xiao1hei",age:18},{id:2,name:"xiao2hei",age:20},{id:3,name:"xiao3hei",age:22}],user:{}},components:{myTable,updateForm},methods:{handleShowUser(u){this.user = JSON.parse(JSON.stringify(u));},handleUpdateUser(u){this.users.forEach((item,i,users)=>{if(item.id == u.id){//由于Vue2.x無法直接檢測到數(shù)組中元素的變化，可以使用vue提供的$set方法this.$set(this.users,i,JSON.parse(JSON.stringify(u))g);}})}}}) </script>

總結(jié)

以上是生活随笔為你收集整理的Vue第二部分(2)：组件的嵌套与通信的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。