美文网首页
vue两个组件之间通信,不使用父子关系

vue两个组件之间通信,不使用父子关系

作者: 舒尔诚 | 来源:发表于2019-08-24 22:56 被阅读0次

    vue中的bus事件,一般作为中央事件总线来使用

    简单例子:比如在A,B组件为兄弟组件,现在A要调用B的中C事件

    1.创建一个bus.js

    内容:

    import Vue from 'vue'

    const Bus = new Vue()

    export { Bus }

    2.在A,B组件中引入bus.js

    import { Bus } from 'bus'

    3.在A组件中定义要调用B事件的bus事件名

    例如:Bus.$emit('callC')

    4.在B组件中调用C方法

    Bus.$on('callC',this.C)

    Bus.$on里有两个参数,第一个是在A组件定义的名字,第二个参数是B组件要调用的方法,第二个参数也可以自定义方法,
    如:

    A中触发:Bus.$emit("pushmsg", msg);//触发中央总线

    B中定义,在mounted中定义:
    let that=this;
    Bus.$on('pushmsg',msg=>{
    that.pushmsg(msg);
    });

    相关文章

      网友评论

          本文标题:vue两个组件之间通信,不使用父子关系

          本文链接:https://www.haomeiwen.com/subject/xbscectx.html