vue事件总线方式实现兄弟组件通信-我爱编程

当前位置：: 首页; 文章; 前端
详情

vue事件总线方式实现兄弟组件通信

前端
三生万物
0

注册一个事件总线，把事件的触发与监听绑定在上面

event_bus.js

import Vue from 'vue';
export default new Vue();

a.vue

import eventBus from '../js/event_bus';
export default {
  methods: {
    closeOther() {
      eventBus.$emit('closeB');
    }
  }
}

b.vue

import eventBus from '../js/event_bus';
export default {
  data() {
    return {
      visible: true
    }
  },
  mounted() {
    // 关闭search下拉
    eventBus.$on('closeB', () =&gt; {
      this.visible= false;
    });
  },
  beforeDestroy: function() {
    eventBus.$off('closeB'); // 销毁前移除
  }
}

免责申明：本站发布的内容（图片、视频和文字）以转载和分享为主，文章观点不代表本站立场，如涉及侵权请联系站长邮箱：xbc-online@qq.com进行反馈，一经查实，将立刻删除涉嫌侵权内容。