元件之間事件觸發

之前使用元件，並不是很頻繁，是水平的問題，目前工作中，公司大佬帶著我手寫過一個元件，再此很感謝他的指導。目前簡單的元件已經有了自己的邏輯思維，正在從低階碼農向中級碼農蛻變。廢話不多說。上圖看看元件情況。

新增按鈕元件：

操作按鈕組合元件：

此時有個需求就是，無論是哪個按鈕，如果改變了列表中的資料，列表需要實時更新資料。

此時就需要用到元件間的事件觸發。

父子元件之間事件觸發可以使用$emit

$emit的使用方法如下：

在子元件中，寫一個click點選事件。比如：

cancelCU() {
 this.dialogVisible = false;
 this.$emit('closeAdd')
}

然後在父元件中子元件上，新增一個 @closeAdd="closeAddClick"，closeAddClick函式就是執行了。

新增按鈕可以使用這種方式。但是操作按鈕組合中的元件，就屬於孫子元件了，孫子元件執行click事件，列表資料需要重新整理，此時通過孫子元件觸發父元件事件，父元件觸發爺爺元件，就比較麻煩了，此時可以通過event bus實現跨元件的事件觸發了。

具體使用方法如下：

第一步：

新建一個js檔案，來創建出我們的eventBus，我們把它命名為bus.js

內容如下：

import Vue from 'vue';

export default new Vue();

第二步：

在孫子元件和爺爺元件中，都需要引入這個bus.js

import Bus from 'common/js/bus.js';

孫子元件執行方法如下:

addCart(event) { 
 //如果傳遞引數的話，可以如下這樣寫
 Bus.$emit('getTarget',event.target); 
 //如果不傳遞引數可以如下；
 Bus.$emit('getTarget');
}

這裡我們在click元件中每次點選，都會在bus中觸發這個名為'getTarget'的事件，並將點選事件的event.target順著事件傳遞出去。

接著，我們要在show元件中的created()鉤子中呼叫bus監聽這個事件，並接收引數：

created() { 
 //如果傳遞引數的話，爺爺元件需要這樣接收
 Bus.$on('getTarget',target => { 
  console.log(target); 
 }); 
 //如果不傳遞引數的話，則可以如下處理
 Bus.$on('getTarget',()=>{
 //此處執行對應的函式操作
 })
} 

這樣，在每次click元件的點選事件中，就會把event.target傳遞到show中，並console出來。

所以eventBus的使用還是非常便捷的，但是如果是中大型專案，通訊比較複雜，還是建議大家直接使用vuex。

補充知識：vue 2 使用Bus.js進行兄弟(非父子)元件通訊 簡單案例

vue2中廢棄了$dispatch和$broadcast廣播和分發事件的方法。父子元件中可以用props和$emit()。如何實現非父子元件間的通訊，可以通過例項一個vue例項Bus作為媒介，要相互通訊的兄弟元件之中，都引入Bus，之後通過分別呼叫Bus事件觸發和監聽來實現元件之間的通訊和引數傳遞。

首先需要在任意地方新增一個bus.js

在bus.js裡面 寫入下面資訊

import Vue from 'vue'

export default new Vue;

在需要通訊的元件都引入Bus.js

如果你的bus.js是自定義一個bus的檔案那from後面就改成你的所放的位置

import Bus from './bus.js'

接下來就是要元件通訊了

新增一個 觸發 #emit的事件按鈕

<template>
  <div id="emit">
    <button @click="bus">按鈕</button>
  </div>
 </template> 

import Bus from './bus.js' 
export default { 
  data() {
    return {
      message: ''"
    }
   },　　methods: {
    bus () {
     Bus.$emit('msg','我要傳給兄弟元件們，你收到沒有')
    }
  }
}

開啟要和$emit通訊的另外一個元件 新增

在鉤子函式中監聽msg事件

<template>
  <div id="on">
      <p>{{message}}</p>
  </div>
</template>

import Bus from './bus.js'
export default {
  data() {
   return {
    message: ''
   }
  },mounted() {
　　　　let self = this
    Bus.$on('msg',(e) => {
     self.message = e
　　　　　console.log(`傳來的資料是：${e}`)
    })
   }
  }

最後p會顯示來自$emit傳來的資訊

以上這篇vue 元件之間事件觸發($emit)與event Bus($on)的用法說明就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。