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使用异步传参就可以了。

posted @ 2021-04-08 11:21  seekHelp  阅读(407)  评论(0编辑  收藏  举报