本文主要介绍关于Vue组件通信的四种方式，分别是父向子组件通信、子向父组件通信、非父子组件的EventBus通信、Vuex状态管理
- 第一种：父组件向子组件传递数据
父组件一共需要做4件事
1.import son from './son.js' 引入子组件 son
2.在components : { son } 里注册子组件
3.在父组件的template应用子组件, <son></son>
4.如果需要传递数据给子组件,就在template模板里写 <son :num="number"></son>
// 1.引入子组件
import son from './son'
// 2.在ccmponents里注册子组件
components : {
son
}
// 3.在template里使用子组件
<son></son>
// 4.如果需要传递数据,也是在templete里写
<son :num="number"></son>
子组件只需要做1件事：
用props接受数据,就可以直接使用数据或修改
// 用Props接受数据
props: [
'num'
],
注意：若子组件接收的数据为引用类型数据并进行修改的话，父组件的值也会改变，如果想要不影响父组件，子组件可以对接收的数据进行深复制后再修改
- 第二种：子组件向父组件传递数据
父组件一共需要做2件事情- 在template里定义事件
- 在methods里写函数,监听子组件的事件触发
// 1. 在templete里应用子组件时,定义事件changeNumber
<son :num="number"
@changeNumber="changeNumber"
>
</son>
// 2. 用changeNumber监听事件是否触发
methods: {
changeNumber(val){
console.log('子组件emit了',val);
this.number = val
},
}
子组件一共需要1件事情
用$emit触发即可
// 1. 子组件在数据变化后,用$emit触发即可,第二个参数可以传递参数
methods: {
increment(){
this.number++
this.$emit('changeNumber', this.number)
},
}
- 第三种: EventBus
eventBus这种通信方式,针对的是非父子组件之间的通信,它的原理还是通过事件的触发和监听。
但是因为是非父子组件的关系,他们需要有一个中间组件来连接。
我是使用的通过在根组件,也就是#app组件上定义了一个所有组件都可以访问到的组件,具体使用方式如下
使用eventBus传递数据,我们一共需要做3件事情：
1.给app组件添加Bus属性 (这样所有组件都可以通过this.$root.Bus访问到它,而且不需要引入任何文件)
2.在组件1里,this.$root.Bus.$emit触发事件
3.在组件2里,this.$root.Bus.$on监听事件
// 1.在main.js里给app组件,添加bus属性
import Vue from 'vue'
new Vue({
el: '#app',
components: { App },
template: '<App/>',
data(){
return {
Bus : new Vue()
}
}
})
// 2.在组件1里,触发emit
increment(){
this.number++
this.$root.Bus.$emit('eventName', this.number)
},
// 3.在组件2里,监听事件,接受数据
mounted(){
this.$root.Bus.$on('eventName', value => {
this.number = value
console.log('busEvent');
})
},
- 第四种: Vuex状态管理
对于比较复杂的场景可以使用Vuex，Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
