Vue组件传值EventBus

71 阅读 0 评论 47 点赞

我是靠谱客的博主难过犀牛，最近开发中收集的这篇文章主要介绍Vue组件传值EventBus，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在实际工作中,组件之间传值不仅仅是父子组件之间的传值,有时候需要跨组件进行传值,甚至没啥关系的组件之间进行传值,EventBus正好解决了这个问题.

看过帖子,说EventBus类似vuex都是对全局数据进行管理,但vuex相对规范些.下面简单介绍下EventBus的使用.

一创建EventBus

有两种方法,但是原理我认为都差不多.

①在main.js中,引入Vue构造函数,在构造函数的显示原型上添加$EventBus,并赋值new Vue()

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
// 这里给EventBus复制了实例化Vue对象
Vue.prototype.$EventBus = new Vue()
new Vue({
  render: h => h(App),
}).$mount('#app')

②建立一个EventBus的js文件

// event-bus.js这里就是哪里用哪里引
import Vue from 'vue'
export const EventBus = new Vue()

二创建两个,没什么关系的组件(目的A组件向B组件发送消息)

<template>
  <div>
    <div>
      <aPage></aPage>
    </div>
    <bPage></bPage>
  </div>
</template>

三 A组件声明方法触发EventBus(因为我们把EventBus绑在全局vue原型上,所以直接this调用,$emit发送消息)

<template>
  <div>
    <span>这里是A组件</span>
    <button @click="btnSend">点击向B组件发消息</button>
  </div>
</template>

<script>
export default {
  name: 'aPage',
  data() {
    return {}
  },
  methods: {
    btnSend() {
        this.$EventBus.$emit('aMsg', '来自A页面的消息')
    },
  },
}
</script>

四 B组件进行接收(这里注意使用完EventBus要对EventBus进行销毁,防止对全局污染)

<template>
  <div>
      <div>这里是B组件</div>
      <span>{{msg}}</span>
  </div>
</template>

<script>
export default {
    name: 'bPage',
    data() {
        return {
            msg: ""
        }
    },
    methods: {
        
    },
    mounted() {
        this.$EventBus.$on('aMsg', (msg)=>{
            this.msg = msg
        })
    },
    beforeDestroy() {
        this.$EventBus.$off('aMsg')
    },
}
</script>

五效果