美文网首页
2019-06-11 非父子组件通信(通过bus形式)

2019-06-11 非父子组件通信(通过bus形式)

作者: qiaoguoxing | 来源:发表于2019-06-11 20:34 被阅读0次

vue官网指出,可以使用一个空vue实例作为事件中央线!

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

举个例子。

公共实例文件bus.js,作为公共数控中央总线

import Vue from "vue";

export defaultnewVue();

第一个组件 first.vue

import Bus from '../bus.js';

export default {

  name: 'first',

  data () {

    return {

      value: '我来自first.vue组件!'

    }

  },

  methods:{

    add(){// 定义add方法,并将msg通过txt传给second组件

      Bus.$emit('txt',this.value);

    }

  }

}

export default {

  name: 'first',

  data () {

    return {

      value: '我来自first.vue组件!'

    }

  },

  methods:{

    add(){// 定义add方法,并将msg通过txt传给second组件

      Bus.$emit('txt',this.value);

    }

  }

}

第二个组件second.vue

import Bus from '../bus.js';

export default {

  name: 'second',

  data () {

    return {

   }

  },

  mounted:function(){

    Bus.$on('txt',function(val){//监听first组件的txt事件

      console.log(val);

    });

  }

}

这样,就可以在第二个非父子关系的组件中,通过第三者bus.js来获取到第一个组件的value。

兄弟组件之间与父子组件之间的数据交互,两者相比较,兄弟组件之间的通信其实和子组件向父组件传值有些类似,其实他们的通信原理都是相同的,

例如子向父传值也是$emit和$on的形式,只是没有eventBus,但若我们仔细想想,此时父组件其实就充当了bus这个事件总线的角色。

有个问题,就是父子之间传值或者子父之间传值是不是都可以用这个方式?

相关文章

网友评论

      本文标题:2019-06-11 非父子组件通信(通过bus形式)

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