Vue父子组件传值的方式

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

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

一 创建EventBus

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

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

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

②建立一个EventBus的js文件

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

二 创建两个，没什么关系的组件（目的A组件向B组件发送消息）

<template>
  <div>  
    <aPage></aPage>
  </div>
  <bPage></bPage>
</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 {}
    },
    mathods: {
      btnSend() {
        this.$EventBus.$emit('aMsg', '来自A页面的消息')
      }
    }
   }  
</script>

四 B组件进行接收（这里注意使用完EvenetBus要对EventBus进行销毁，防止对全局污染）

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

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

五 效果