vue中兄弟传参(事件总线)
1、子传父,父传子
2、vuex
3、eventBus
一、子传父,父传子,这个是比较好理解的,但是相对会比较繁琐,只要会用父子通讯和子父通讯就可以完成
二、vuex的方式,个人使用比较少
三、事件总线的方式,这个方式相对性价比最高
使用方式如下
创建一个js文件,位置放哪都行
import Vue from 'vue'
export default new Vue()
把这个文件引入到各个兄弟组件中
import Bus from '@/components/eventBus';
若实现组件A传给组件B
组件A中需要传输的参数:
// 然后在methods里边定义一个函数
methods:{
changesize(){
eventBus.$emit('myMsg',"组建A传输的参数") //两个参数,参数一是事件名,参数二是传递的参数
}
}
组件B中需要接受传输的参数
// 把接受数据放到生命周期mounted上
mounted() {
// 传输方需要异步才不会报错
Bus.$on('myMsg', myMsg => { //接受从组件Search/index发送过来的信息
console.log("我是组件B,接受了组件A发送的数据--->",myMsg )
});
// 原型的函数是
/*
Bus.$on('myMsg', function(myMsg){ //接受从组件Search/index发送过来的信息
console.log("我是组件B,接受了组件A发送的数据--->",myMsg )
});
*/
},
注:在我自己的项目中遇到了一个问题。就是组件A传输参数的时候报错了,提示"Error in event handler for "myMsg": "TypeError: Cannot read property 'clearFilter..."这样的报错,原因应该是传参是没有参数,此时组件A使用异步传参就可以了。