美文网首页
【Vue】同级组件间通信

【Vue】同级组件间通信

作者: 佐蓝Gogoing | 来源:发表于2019-07-11 00:11 被阅读0次

    1. 创建一个事件总线

    同级组件间无法直接通信,assets 下创建 eventBus.js 作为总线,内容如下

    import Vue from 'Vue';
    
    export default new Vue;
    

    2. 触发与监听事件

    在两个组件中都要引入总线

    import bus from '@/assets/eventBus';
    

    在一个组件中添加方法,使用 $emit 触发事件

    showTable(data) {
        bus.$emit("showTables", data);
    },
    

    在另一个组件的 mounted 中使用 $on 监听事件

    mounted() {
         bus.$on("showTables",function (data) {
             // 处理事件
         });
    }
    

    相关文章

      网友评论

          本文标题:【Vue】同级组件间通信

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