VUE专题（三）组件之间的传值(父传子，子传父，非父子组件之间通

vue

今天我来讲一下vue组件之间的传值。
组件实例的作用域是孤立的。
这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。
可以使用 props 把数据传给子组件。
先说一下场景：
我在App.vue中引用serList组件，现在他们父子关系。
这是我在App.vue中的代码
<pre>
<serList class="serListPad" :services="services" @services-change="servicesChange"></serList>
</pre>
serList 是在components中定义好的
<pre>
import serList from './components/ser_list.vue';
components: {
serList
}
</pre>
services也是在data中定义好的
<pre>
import service from './components/service.vue';
data () {
return {
services: [service],
}
}
</pre>
我现在用bind的方式把我想要传给子组件的值给传过去，:services="services"，: 是bind的缩写。
现在我们来注意看子组件serList.vue:
父组件传过来的值子组件要用props接收
<pre>
props: ['services']
</pre>
我们接收过来的这个值怎么使用呢？
我们可以直接像data中的数据一样，用this.services,也可以像我一样再data中再定义一个新的data当做桥梁
<pre>
data () {
return {
myServices: this.services
}
}
</pre>
到目前为止，父传子就是这样的
现在讲一下子传父：
vue2.0中可以使用$emit来向父组件派发事件，父组件中用$on来监听自定义的事件
<pre>
watch: {
services(val) {
this.myServices = val;
},
myServices(val) {
this.$emit('services-change', val);
console.log('打印myServices');
console.log(this.myServices);
}
},
</pre>
在services中监听一下变化，然后把最新的变化赋值给myServices
同样mySercices的变化也要通知父级
'sercices-change'自定义事件传递给父级，父级接收到这个事件，然后执行具体的方法。
<pre>
<serList class="serListPad" :services="services" @services-change="servicesChange"></serList>
</pre>
然后在methods中定义servicesChange方法
<pre>
servicesChange (val) {
this.services = val;
}
</pre>

现在讲一下非父子组件之间的通信（但是太复杂的情况，建议还是使用状态管理： vuex）
使用空的vue实例作为中央事件总线
<pre>
var bus = new Vue();

// 触发组件 A 中的事件
bus.$emit('id-selected', 1)

// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
// ...
})
</pre>
这些就是我目前用到的传值。
欢迎交流。

vue交流群