组件的嵌套

在Vue的设计中，一切都可以看作组件。整个页面可以看作是一个根组件，内部的各块组件可以看作子组件。组件之间自然的会发生嵌套关系。

接下来，我们看一下组件嵌套的示例：

<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() 没有显式的使用组件的语法，但它本质上也是一个父组件。

组件通信

通常一个较为复杂的页面，一定会出现组件的嵌套。各个组件之间以嵌套的关系组合在一起，那么这个时候不可避免的会有组件间通信的需求。

1. 父传子：props

通常父组件的模板中包含子组件，父组件要正向地向子组件传递数据或参数，子组件接收到后根据参数的不同来渲染不同的内容或执行操作。这个正向传递数据的过程就是通过props来实现的。

比如在之前的表格案例中，table-body子组件展示的数据是定义在子组件自个身上的，这么做虽有效果，但降低了该组件的复用价值，更好的做法：子组件中不定义数据，而是由使用它的父组件传递。此时，需要使用 props完成父组件向子组件的数据传递。

语法：
//1.定义子组件中添加props属性
const 组件 = {
template:“html片段”,
props:[“自定义参数名”,…]
}
//2 使用组件时，为组件添加 自定义参数名 同名的属性
<组件 :自定义参数名=”值"></组件>

例子：

<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

父组件的模板中包含子组件，那么经常会出现子组件的状态发生变化时，要通知到父组件。所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。如下所示：

代码如下：

<div id="app"><h2>{{num}}</h2><!-- 父组件向子组件传递数据 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采用事件放射的方式完成。

• 在子组件中执行 $emit(“父组件的自定义事件”)通知父组件，并发送数据
• 父组件中定义自定义事件处理函数，并接收数据

<div id="app"><h2>{{num}}</h2><!-- 2 绑定自定义事件处理函数，监听子组件的事件触发 change-count当子组件触发事件后，执行handleChange事件处理函数，$emit发送的数据将成为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触发父组件中的自定义事件，并发送数据this.$emit("change-count",this.count);},decrement(){this.count--;//1 子组件中通过$emit触发父组件中的自定义事件，并发送数据this.$emit("change-count",this.count);}}})const vm = new Vue({el:"#app",data:{num:0},methods:{handleChange(value){this.num = value;}}}) </script>

实战案例

代码如下：

<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无法直接检测到数组中元素的变化，可以使用vue提供的$set方法this.$set(this.users,i,JSON.parse(JSON.stringify(u))g);}})}}}) </script>

总结

以上是生活随笔为你收集整理的Vue第二部分(2)：组件的嵌套与通信的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。