vue使用bus總線，實現非父子組件間的通信

 

vue組件通信方式有好多，可以使用props傳值，但是props只能父子組件使用。也可以使用vuex，但是vuex比較重，而且非全局的通信最好不要使用vuex

 

在簡單的場景下，可以使用一個空的Vue實例作為中央事件總線。

 

這里有兩種方式可以使用

 

第一種是新建一個bus.js文件，初始化一個空的Vue實例，作為中央總線，然后再組件引用時調用這個bus.js文件

import Vue from 'vue';
const EventBus = new Vue();

export default EventBus;

 

第二種是全局定義，將bus掛載到vue.prototype上

import Vue from 'vue';

Vue.prototype.bus = new Vue();

 

下面根據一個實例來看一下這兩種寫法

子組件1

<template>
  <section>
    <h1>left</h1>
    <el-button type="primary" @click="isClick">點擊</el-button>
  </section>
</template>

<script> import eventBus from '~/utils/eventBus'; export default { methods: { isClick() { eventBus.$emit('isLeft', '點擊事件！'); this.bus.$emit('liRight', 'asdasdasdasd'); } } } </script>

子組件2

<template>
  <section>
    <h1>right</h1>
  </section>
</template>

<script> import eventBus from '~/utils/eventBus'; export default { data() { return { name: 'right默認值' }; }, mounted() { this.bus.$on('liRight', (val) => { console.log(val); }); eventBus.$on('isLeft', (info) => { console.log(info); }); }, beforeDestroy() { this.bus.$off(['isLeft', 'liRight']) } } </script>

父組件

<template>
  <section>
    <el-row>
      <el-col :span="12">
        <left/>
      </el-col>
      <el-col :span="12">
        <right />
      </el-col>
    </el-row>
  </section>
</template>

<script> import left from '~/components/left' import right from '~/components/right' export default { components: { left, right } } </script>

以上事例，我們在組件1中觸發了事件，然后組件2中監聽到事件，並進行相關操作，兩個組件是非父子組件通信

 

 

總結

1.可以實現vue跨級組件之間的通信，在實際的開發項目中，如果數據和業務邏輯不是特別復雜，沒有必要使用Vuex，那么我們就可以通過這種方式，實現我們再實際業務邏輯中的組件間數據傳遞，而且代碼比較簡潔直觀。

2.注冊的總線事件要在組件銷毀時卸載，否則會多次掛載，造成觸發一次但多個響應的情況

 

 

嗯，就醬~~