Vue2.0父子組件間事件派發機制的示例分析

這篇文章主要為大家展示了“Vue2.0父子組件間事件派發機制的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“Vue2.0父子組件間事件派發機制的示例分析”這篇文章吧。

從vue1.x過來的都知道，在vue2.0中，父子組件間事件通信的$dispatch和$broadcase被移除了。官方考慮是基于組件樹結構的事件流方式實在是讓人難以理解，并且在組件結構擴展的過程中會變得越來越脆落。特別是在組件層級比較深的情況下。通過廣播和事件分發的機制，就顯得比較混亂了。

官方在廢除的同時，也為我們提供了替換方案，包括實例化一個空的vue實例，使用$emit反應子組件上的狀態變化

1.使用$emit觸發事件

helloWorld.vue作為父組件，dialogConfigVisible變量控制子組件彈框顯示或隱藏。

configBox.vue作為子組件，假設為封裝的公告彈窗。

在父組件中 helloWorld.vue 中

< template/>

  <config-box
   :visible="dialogConfigVisible"        
   @listenToConfig="changeConfigVisible"
 > </config-box>

script

 data(){
  return {
   dialogConfigVisible:true
  }
 }
  methods: {
   changeConfigVisible(flag) {
     this.dialogConfigVisible = flag;
   }
  }

然后，在子組件 configBox.vue 中，主要在任意事件回調中,使用 $emit來觸發自定義的 listenToConfig事件，后面還可以加上參數傳給父組件。比如，在子組件彈窗上點擊×關閉時，通知父組件 helloWorld.vue我要關閉了，主要方便父組件改變相應狀態變量，并傳入false到自定義的事件中。

script

methods:{
 dialogClose() {
  this.show = false;
  this.$emit("listenToConfig", false)
 }
}

在子組件中，主動觸發listenToConfig事件，并傳入參數 false, 告訴父組件 helloWorld.vue對話框要關閉了。這里就可以避免父組件中的狀態未變化，再次刷新頁面的時候對話框會自動出現。

2.實例化一個空的vue實例bus

這里實例化一個bus 空vue實例，主要為了統一管理子組件和父組件相互通信，通過bus 作為媒介，首先新建一個bus.js 文件，在里面新建一個對象，父組件為table.vue， 子組件為tableColumn.vue

 // bus.js
 import Vue from "vue";
 export var bus = new Vue({
   data:{
    scrollY:false
   },
   methods:{
    updateScrollY(flag){
     this.scrollY = flag;
    }
   }
  })

然后分別引入：

 // table.vue
 <script>
 import {bus} from "./bus"
  export default {
   created(){
    bus.$on('getData',(argsData)=>{
     // 這里獲取子組件傳來的參數
     console.log(argsData);
     })

   }
  }

 </script>

 // tableColumn.vue
 <script>
  import {bus} from "./bus"
  export default{
   methods(){
    handleClick(){
     bus.$emit('getData',{data:"from tableColumn!"})
    }
   }
  }
 </script>

上面的父子組件中，父組件中利用bus注冊監聽事件getData,子組件中一旦有狀態變化，就觸發bus上對應的事件。

這種利用空實例的方式，相當于創建了一個事件中心，所以這種通信同樣適用于非父子組件間的通信，

3.多級父子組件通信

有時，可能想要實現通信的兩個組件不是直接的父子組件，而是祖父和孫子，或者是跨越了更多層級的父子組件

不可能由子組件一級一級的向上傳遞參數，來達到通信的目的，雖然現在我們理解的通信都是這樣經過中轉的。可以通過while等循環，不斷向上遍歷，直到找到目標父組件，就在對應的組件上觸發事件。

下面就只element-ui實現的一個父子組件通信的mixins,對于組件同步有很大的作用。在element-ui 的優點概述中也特意提到這個組件通信

function broadcast(componentName, eventName, params) {

 // 向下遍歷每個子節點，觸發相應的向下廣播的 事件
 this.$children.forEach(child => {
  var name = child.$options.componentName;

  if (name === componentName) {
   child.$emit.apply(child, [eventName].concat(params));
  } else {
   broadcast.apply(child, [componentName, eventName].concat([params]));
  }
 });
}
export default {
 methods: {
   // 向上遍歷父節點，來獲取指定父節點，通過$emit 在相應的 組件中觸發 eventName 事件
  dispatch(componentName, eventName, params) {
   var parent = this.$parent || this.$root;
   var name = parent.$options.componentName;
   // 上面的componentName 需要在每個vue 實例中額外配置自定義屬性 componentName,
   //可以簡單替換成var name = parent.$options._componentTag;

   while (parent && (!name || name !== componentName)) {
    parent = parent.$parent;

    if (parent) {
     name = parent.$options.componentName;
    }
   }
   if (parent) {
    parent.$emit.apply(parent, [eventName].concat(params));
   }
  },
  broadcast(componentName, eventName, params) {
   broadcast.call(this, componentName, eventName, params);
  }
 }
};

首先定義兩個嵌套的組件 f1.vue 和 c1.vue,實例是：

 <f1>
  <c1></c1>
 </f1>

然后，分別定義兩個父子組件：

c2.vue

 <template>
   <section>
   <button type="button" name="button" @click="dispatchTest">點擊一下，就可以</button>
  </section>
 </template>
<script type="text/javascript">
import Emitter from "../mixins/emitter";
export default {
name: "c2",
mixins: [Emitter],
componentName:'c2',
methods: {
 dispatchTest() {
  this.dispatch('f1', 'listenerToC1', false);
 }
}
}
</script>

 f1.vue

<template type="html">
 <div class="outBox-class">
  <slot>
  </slot>
 </div>
</template>

<script type="text/javascript">
import Emitter from "../mixins/emitter";
export default {
name: "f1",
mixins: [Emitter],
componentName: 'f1',
mounted() {
 this.$on("listenerToC1", (value) => {
   alert(value);
 })
}
}
</script>

這樣，就可以在子組件中點擊按鈕，觸發 listenerToC1事件，在父組件中監聽到這個事件，

其實更$emit觸發事件類似。不同之處在于，這里可以多級嵌套，不一定是直接的父子組件都可以觸發到。

以上是“Vue2.0父子組件間事件派發機制的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！