Vue -Bus总线

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

有时候两个组件也需要通信（非父子关系）。当然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 => { 
      this.msg = content;
    });
  }
});
Vue.component('c2',{
  template: '<button @click="sendEvent">Say Hi</button>',
  methods: {
    sendEvent() {
      Bus.$emit('setMsg', 'Hi Vue!');
    }
  }
});
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 {
            .........
            }
      },
  methods: {
        ....
　　　Bus.$on('log', content => { 
      console.log(content)
    });
 }, 
}

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

 实际运用二（推荐）：

当然也可以直接将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()来调用

以上是 Vue -Bus总线 的全部内容， 来源链接： utcz.com/z/375656.html

回到顶部