【Vue】同级组件间通信

2019-07-11  本文已影响0人  佐蓝Gogoing

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) {
         // 处理事件
     });
}
上一篇下一篇

猜你喜欢

热点阅读