vue組件通訊與經常使用技巧分享

時間 2019-11-08

標籤 vue 組件通訊經常使用技巧分享简体版

原文原文鏈接

1、vue組件通訊背景

組件是vue.js 最強大功能之一，組件的做用域是相互獨立的，這就意味着不一樣組件之間的數據是沒法相互引用，因此就有了各類組件通訊方式。html

無論啥樣的通訊方式，都逃離不了上圖的各類關係(樹)。 A和B、B和C、B和D 都是父子關係，C與D 是兄弟關係，A與C、A與D 是隔代關係（多代）。

2、多種實用組件通訊方式

一、父子通訊 - 經過prop 向子組件傳遞數據

父組件演示代碼vue

<section>
        <p>通訊方式1 <button @click="addIndex">點擊父組件修改index</button></p><br/>
        <Signal1 :index="indexVal" :randomVal="randomVal"></Signal1>
      </section>
複製代碼

子組件演示代碼 git

當隔代（多代）的關係須要進行props傳遞的時候，一個個對應好像很麻煩、也很難擴展，能夠嘗試用一次性傳遞。
如 A --> B --> C --> D
看下Demo。經過以下v-bind="$props" 進行綁定github

// 大體以下：
  computed: {
    contData() {
      return this.$attrs.contData
    },
    ruleExplain() {
      return this.$attrs.ruleExplain
    }
  },
複製代碼

其實，無論是一個個添加、仍是$props,這種隔代方式通訊都是比較麻煩的vuex

二、子父通訊 - 經過$on和$emit

父組件經過v-on:fn=」xx」來設置監聽，子組件經過$emit('fn') 來觸發。另外，在vueTool event 能夠查看emit 事件

注意，prop 是單向數據流的，不要在子組件裏直接修改props中的對象數據。bash

三、萬能通訊 - 經過provide/inject傳遞數據

tips: provide/inject 是vue.js 2.2.0 版本以後新增的API。iview

四、萬能通訊 - 經過bus方式傳遞數據

原理就是使用一個空的Vue實例做爲中央事件總線。dom

注意：
一、事件訂閱需在事件廣播前註冊。
二、而且在組件銷燬前，需取消事件訂閱ide

五、萬能通訊 - 經過查找任意組件形式傳遞數據

查找組件可能的場景：函數

由一個組件，向上找到最近的指定組件。
由一個組件，向上找到全部的指定組件。
由一個組件，向下找到最近的指定組件。
由一個組件，向下找到全部指定的組件。
由一個組件，找到指定組件的兄弟組件。

好比：

注意：組件需取好name,否則是找不到的。這種通訊方式在功能獨立組件會使用不少。
好比 iview 具體的工具函數查看 iview 裏的源碼源碼

// Find components upward
function findComponentUpward (context, componentName, componentNames) {
    if (typeof componentName === 'string') {
        componentNames = [componentName];
    } else {
        componentNames = componentName;
    }

    let parent = context.$parent;
    let name = parent.$options.name;
    while (parent && (!name || componentNames.indexOf(name) < 0)) {
        parent = parent.$parent;
        if (parent) name = parent.$options.name;
    }
    return parent;
}
export {findComponentUpward};

複製代碼