[JavaScript知识库]vue 兄弟组件传值之eventBus

兄弟组件传值可以用 vuex 或者 eventBus，这里介绍eventBus。

方法一：

创建一个单独的js文件event.js,内容如下

import Vue from 'vue'
export default new Vue

假如父组件如下：

<template>
     <components-a></components-a>
     <components-b></components-b>
</template>

子组件a如下：

<template>
      <div class="components-a">
           <button @click="abtn">A按钮</button>
      </div>
</template>
<script>
import eventVue from '../../js/event.js'
export default {
      name: 'app',
      data () {
        return {
                'msg':"我是组件A"
        }
      },
      methods:{
           abtn(){
                   eventVue.$emit("myFun",this.msg)   //$emit这个方法会触发一个事件
           }
      }
}
</script>

子组件b如下：

<template>
     <div class="components-a">
         <div>{{btext}}</div>
     </div>
</template>
<script>
import eventVue from '../../js/event.js'
export default {
   name: 'app',
   data () {
        return {
           'btext':"我是B组件内容"
        }
   },
   created:function(){
       this.bbtn();
   },
   methods:{
       bbtn(){
            eventVue.$on("myFun",(message)=>{   //这里最好用箭头函数，不然this指向有问题
                 this.btext = message      
            })
       }
    }
}
</script>

方法二：方法一的变种

省略了外部的js文件，直接把总线放在main.js里的vue实例中，写法如下：

new Vue({
    el: "#app",
    router,
    data: {
        eventVue: new Vue()
    },
    template: "<App/>"
    compnents: {App}
})

在使用的时候，不需要引入外部文件，只需要在Bus前加this.$root，即可调用。

子组件a如下：

methods:{
   abtn(){
           this.$root.eventVue.$emit("myFun",this.msg)   //$emit这个方法会触发一个事件
   }
}

子组件b：

methods:{
   bbtn:function(){
        this.$root.eventVue.$on("myFun",(message)=>{   //这里最好用箭头函数，不然this指向有问题
             this.btext = message      
        })
   }
}

方法三：和上面同理写法不一样，增加了移除事件的方法

创建一个单独的js文件event.js,内容如下：

const install = function (Vue) {
  const EventBus = new Vue({
    methods: {
      emit(event, ...args) {
        this.$emit(event, ...args)
      },
      on(event, callback) {
        this.$on(event, callback)
      },
      off(event, callback) {
        this.$off(event, callback)
      }
    }
  })
  if (typeof window !== 'undefined') {
    window.$bus = EventBus
  }
  Vue.prototype.$bus = EventBus
}
export default install

子组件a里面触发一个事件：

handleClick(msg) {
      this.$bus.$emit('assetTypeCodeChange', msg)
    },

子组件b 接受这个事件，并在组件销毁时移除事件：

created() {
    this.$bus.$on('assetTypeCodeChange', code => {
      console.log(code)
    })
  },
  beforeDestroy() {
    this.$bus.$off('assetTypeCodeChange')
  },