码迷,mamicode.com
首页 > 其他好文 > 详细

Vue中的Bus(总线)实现非父子组件通信

时间:2019-03-11 13:09:35      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:使用   console   场景   target   www.   https   export   作用   import   

1、Bus 的实现

Vue2.0提供了Vuex进行非父子组件之间的通信,但在简单的场景下,可以使用一个空的Vue实例作为中央事件总线。

实现代码示例:

<div id="app">
    <c1></c1>
    <c2></c2>
</div>
var Bus = new Vue();   //为了方便将Bus(空vue)定义在一个组件中,在实际的运用中一般会新建一Bus.js
Vue.component(‘c1‘,{   //这里以全局组件为例,同样,单文件组件和局部组件也同样适用
template:‘<div>{{msg}}</div>‘,
  data: () => ({
    msg: ‘Hello World!‘
  }),
  created() {
    Bus.$on(‘setMsg‘, content => {     //监听Vue示例 Bus 的某一个事件
      this.msg = content;
    });
  }
});
Vue.component(‘c2‘,{
  template: ‘<button @click="sendEvent">Say Hi</button>‘,
  methods: {
    sendEvent() {
      Bus.$emit(‘setMsg‘, ‘Hi Vue!‘);  //触发vue示例 bus 的某一个事件,并且将参数作为数据传过去
    }
  }
});
var app= new Vue({
    el:‘#app‘
})

在实际运用中,一般将Bus抽离出来:

// Bus.js
import Vue from ‘vue‘
const Bus = new Vue()
export default Bus

组件调用时先引入

// 组件1
import Bus from ‘./Bus‘
export default {
  data() {
      return {
         .........
       }
    },
  methods: {
      ....
      Bus.$emit(‘log‘, 120)
  },
}
// 组件2
import Bus from ‘./Bus‘
export default {
    data() {
        return {
            .........
            }
      },
    mounted () {
       Bus.$on(‘log‘, content => { 
          console.log(content)
        });    
    }    
} 

但这种引入方式,经过webpack打包后可能会出现Bus局部作用域的情况,即引用的是两个不同的Bus,导致不能正常通信

1.1、推荐使用Bus的方式

(1)直接将Bus注入到Vue根对象中

import Vue from ‘vue‘
const Bus = new Vue()
var app= new Vue({
    el:‘#app‘,
   data:{
    Bus
    }  
})

在子组件中通过this.$root.Bus.$on()、this.$root.Bus.$emit()来调用

(2)在一个教程视频中看过,也可以通过将Bus放在vue示例的原型对象中使用

Vue.prototype.bus = new Vue();

每个组件都是一个Vue示例,所以每个组件都会有bus属性,在组件中可以通过 this.bus.$emit、this.bus.$on 来调用

Vue.component(‘c2‘,{
  template: ‘<button @click="sendEvent">Say Hi</button>‘,
  methods: {
    sendEvent() {
      this.bus.$emit(‘setMsg‘, ‘Hi Vue!‘);  
    }
  }
});

 

 

参考:https://www.cnblogs.com/fanlinqiang/p/7756566.html

Vue中的Bus(总线)实现非父子组件通信

标签:使用   console   场景   target   www.   https   export   作用   import   

原文地址:https://www.cnblogs.com/wenxuehai/p/10509839.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!