99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

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

目前成都創(chuàng)新互聯(lián)公司已為成百上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站托管、服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、博白網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

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

官方在廢除的同時(shí)，也為我們提供了替換方案，包括實(shí)例化一個(gè)空的vue實(shí)例，使用$emit反應(yīng)子組件上的狀態(tài)變化

1.使用$emit觸發(fā)事件

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

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

在父組件中 helloWorld.vue 中

< template/>

script

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

然后，在子組件 configBox.vue 中，主要在任意事件回調(diào)中,使用 $emit來觸發(fā)自定義的 listenToConfig事件，后面還可以加上參數(shù)傳給父組件。比如，在子組件彈窗上點(diǎn)擊×關(guān)閉時(shí)，通知父組件 helloWorld.vue我要關(guān)閉了，主要方便父組件改變相應(yīng)狀態(tài)變量，并傳入false到自定義的事件中。

script

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

在子組件中，主動(dòng)觸發(fā)listenToConfig事件，并傳入?yún)?shù) false, 告訴父組件 helloWorld.vue對(duì)話框要關(guān)閉了。這里就可以避免父組件中的狀態(tài)未變化，再次刷新頁面的時(shí)候?qū)υ捒驎?huì)自動(dòng)出現(xiàn)。

2.實(shí)例化一個(gè)空的vue實(shí)例bus

這里實(shí)例化一個(gè)bus 空vue實(shí)例，主要為了統(tǒng)一管理子組件和父組件相互通信，通過bus 作為媒介，首先新建一個(gè)bus.js 文件，在里面新建一個(gè)對(duì)象，父組件為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
 

 // tableColumn.vue
 

上面的父子組件中，父組件中利用bus注冊(cè)監(jiān)聽事件getData,子組件中一旦有狀態(tài)變化，就觸發(fā)bus上對(duì)應(yīng)的事件。

這種利用空實(shí)例的方式，相當(dāng)于創(chuàng)建了一個(gè)事件中心，所以這種通信同樣適用于非父子組件間的通信，

3.多級(jí)父子組件通信

有時(shí)，可能想要實(shí)現(xiàn)通信的兩個(gè)組件不是直接的父子組件，而是祖父和孫子，或者是跨越了更多層級(jí)的父子組件

不可能由子組件一級(jí)一級(jí)的向上傳遞參數(shù)，來達(dá)到通信的目的，雖然現(xiàn)在我們理解的通信都是這樣經(jīng)過中轉(zhuǎn)的。可以通過while等循環(huán)，不斷向上遍歷，直到找到目標(biāo)父組件，就在對(duì)應(yīng)的組件上觸發(fā)事件。

下面就只element-ui實(shí)現(xiàn)的一個(gè)父子組件通信的mixins,對(duì)于組件同步有很大的作用。在element-ui 的優(yōu)點(diǎn)概述中也特意提到這個(gè)組件通信

function broadcast(componentName, eventName, params) {

 // 向下遍歷每個(gè)子節(jié)點(diǎn)，觸發(fā)相應(yīng)的向下廣播的 事件
 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: {
   // 向上遍歷父節(jié)點(diǎn)，來獲取指定父節(jié)點(diǎn)，通過$emit 在相應(yīng)的 組件中觸發(fā) eventName 事件
  dispatch(componentName, eventName, params) {
   var parent = this.$parent || this.$root;
   var name = parent.$options.componentName;
   // 上面的componentName 需要在每個(gè)vue 實(shí)例中額外配置自定義屬性 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);
  }
 }
};

首先定義兩個(gè)嵌套的組件 f1.vue 和 c1.vue,實(shí)例是：

然后，分別定義兩個(gè)父子組件：

c2.vue

 f1.vue