Vue第二部分(2)：组件的嵌套与通信
生活随笔
收集整理的這篇文章主要介紹了
Vue第二部分(2)：组件的嵌套与通信
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
組件的嵌套
在Vue的設(shè)計中，一切都可以看作組件。整個頁面可以看作是一個根組件，內(nèi)部的各塊組件可以看作子組件。組件之間自然的會發(fā)生嵌套關(guān)系。
接下來，我們看一下組件嵌套的示例：
說明：事實上，雖然 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 的更新會向下流動到子組件中，但是反過來則不行。如下所示：
代碼如下：
所以，當需要子傳父的時候，Vue采用事件放射的方式完成。
- 在子組件中執(zhí)行 $emit(“父組件的自定義事件”)通知父組件，并發(fā)送數(shù)據(jù)
- 父組件中定義自定義事件處理函數(shù)，并接收數(shù)據(jù)
實戰(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)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 提高国内访问 GitHub 的速度的方案
- 下一篇： 计算机专业相关的毕业设计论文合集免费下载