vue2.0 非父子组件之间的单一事件通信

最新推荐文章于 2023-01-23 16:30:05 发布

转载最新推荐文章于 2023-01-23 16:30:05 发布 · 104 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000009955271

文章标签：

#javascript #ViewUI

本文介绍Vue中非父子组件间如何通过事件中心进行通信的方法。利用一个空Vue实例作为中央数据总线，实现不同层级组件间的自由交流。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言
vue官网指出：通过使用事件中心，允许组件自由交流，无论组件处于组件树的哪一层。由于 Vue 实例实现了一个事件分发接口，你可以通过实例化一个空的 Vue 实例来实现这个目的。

也就是说非父子组件之间的通信，必须要有公共的实例（可以是空的），才能使用 $emit 获取 $on 的数据参数，实现组件通信

创建一个公共实例文件bus.js

#bus.js作为中央数据总线

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

组件 foo.vue

#foo.vue

import Bus from '../bus.js';
export default {
  name: 'foo',
  data () {
    return {
      foo: 'Foo component',
      msg: 'this is foo data'
    }
  },
  mounted:function(){
    var _this=this;
    Bus.$on('add',function(msg){//监听bar组件的add事件
      _this.msg = msg ;
      console.log(_this.msg);
    });
  }
}

3.组件 bar.vue

#bar.vue

import Bus from '../bus.js';
export default {
  name: 'bar',
  data () {
    return {
      bar: 'Bar component',
      msg: 'this is bar data'
    }
  },
  methods:{
    add(){// 定义add方法，并将msg通过add传给foo组件
      Bus.$emit('add',this.msg);
      this.msg='';
    }
  }
}