vue組件通信的幾種方式

vspiders 發布于2019-08-23 16:04 / 2096人閱讀

摘要：雖然和都可以獲取組件實例，但是它們無法在跨級或兄弟間通信，這是它們的缺點。也就是在父組件中提供一個值，并且在需要使用的子孫組件中注入改值，即不僅僅是，只要是的子組件，無論隔多少代，都可以通過這個的方式注入。通過混入組件，實現組件間的通信。

寫在前面

vue 的組件化應該是其最核心的思想了，無論是一個大的頁面還是一個小的按鈕，都可以被稱之為組件。基于 Vue 的開發，就是在寫一個個組件，無論是基礎組件還是業務組件，最后都是要拼裝在一起。按照組件的層級關系，可以把組件之間的關系歸納為：父子關系、隔代關系、兄弟關系，無關聯關系。

$ref 、$parent 、$children

基于當前上下文的，可以通過 $ref 、$parent 、$children 訪問組件實例，可以直接調用組件的方法或訪問數據。其中 $parent 可以訪問當前組件的父組件，$children 可以訪問當前組件的所有子組件。雖然 $parent 和 $children 都可以獲取組件實例，但是它們無法在跨級或兄弟間通信，這是它們的缺點。

provide 、inject

provide / inject 是 Vue 在 2.2.0 版本后新增的 API。

這對選項需要一起使用，以允許一個祖先組件向其所有子孫后代注入一個依賴，不論組件層次有多深，并在起上下游關系成立的時間里始終生效。

也就是在父組件中提供一個值，并且在需要使用的子孫組件中注入改值，即：

// Parent.vue
export default {
    provide() {
        return {
            name: "Stone"
        }
    }
}
// Child.vue
export default {
   inject: ["name"],
   mounted() {
       console.log(this.name)
   }
}

不僅僅是 Child.vue ，只要是 Parent.vue 的子組件，無論隔多少代，都可以通過這個的方式注入。這種多級組件透傳的方式可以保證單向數據流的清晰性，例如像用戶信息這樣的全局信息，就可以借助這兩個 API 來完成，而沒有引入第三方庫 vuex。

替代 Vuex

vuex 是把數據集中管理，然后哪里需要就在哪里獲取，按照這個思路，我們可以在根組件 App.vue 中注入全局信息，并且在頁面的任何地方使用。

// App.vue

export default {
    provide() {
        return {
            userInfo: this.user
        }
    },
    data() {
        return {
            user: {}
        }
    },
    methods: {
      getUserInfo () {
        $.ajax("/user/info", (data) => {
          this.user = data
        })
      }
    }
}

把整個 App.vue 的實例 this 對外提供, 這樣其他頁面就可以通過 this.userInfo 來獲取用戶信息。

$attrs 、$listeners

這兩個 API 是 Vue 2.4.0 新增的。$attrs ，繼承所有的父組件屬性；$listeners ，它是一個對象，里面包含了作用在這個組件上的所有監聽器。

主要用途就是用在父組件傳遞數據給子組件或者孫組件。

dispatch 、 broadcast

這兩個 API 是 Vue 1.0 版本的，$dispatch 用于向上級派發事件，$broadcast 用于向下級廣播事件的，它們在 2.0 版本中已經被廢棄了。

因為基于組件樹結構的事件流方式有時讓人難以理解，并且在組件結構擴展的過程中會變得越來越脆弱。

不過我們可以自行實現 dispatch 和 broadcast 方法，用于組件的跨層級通信。它們實現的關鍵在于如何正確找到所要通信的組件，也就是通過匹配組件的 name 選項向下或向上查找組件。

這兩個方法都需要傳遞 3 個參數，第一個參數是要通信組件的 name 選項值，第二個是自定義事件名稱，第三個是要給通信組件傳遞的值。在 dispatch 里，通過 while 循環不斷向上查找父組件，直到查找到 componentName 與某個父級組件的 name 選項匹配時結束，此時改父組件就是要通信的組件。 broadcast 方法與 dispatch 類似，是通過 forEach 循環向下查找子組件。最后封裝一個 mixins 來便于復用。

// emitter.js 
function broadcast(componentName, eventName, params) {
  this.$children.forEach(child => {
    const name = child.$options.name;
    if (name === componentName) {
      child.$emit.apply(child, [eventName].concat(params));
    } else {
      broadcast.apply(child, [componentName, eventName].concat([params]));
    }
  });
}
export default {
  methods: {
    dispatch(componentName, eventName, params) {
      let parent = this.$parent || this.$root;
      let name = parent.$options.name;
      while (parent && (!name || name !== componentName)) {
        parent = parent.$parent;
        if (parent) {
          name = parent.$options.name;
        }
      }
      if (parent) {
        parent.$emit.apply(parent, [eventName].concat(params));
      }
    },
    broadcast(componentName, eventName, params) {
      broadcast.call(this, componentName, eventName, params);
    }
  }
};

通過 mixins 混入組件，實現組件間的通信。

相比 Vue 1.0 版本內置的兩個 API，自行實現的方法有以下不同：

需要額外傳入組件的 name 作為第一個參數；

匹配到組件就會停止循環，不會冒泡；

傳遞的值只能是一個參數，如果需要傳遞多個參數，只能通過對象或數組的形式；

其他方法

在 vue 中組件的通信還有其他的手法，例如：

props 、$emit

父組件將自己的方法傳遞給子組件，子組件調用方法傳數據給父組件

使用event bus事件總線

$attrs 、$listeners

Vue 2.4 新增的 API。$attrs 包含了父作用域中不作為 prop 被識別 (且獲取) 的特性綁定 (class 和 style 除外)。$listeners 包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器。

Vuex 集中式狀態管理

寫在最后

不同的通信方法適用于不同的場景，既可以通過 Vue 內置的 API 來通信，也可以通過自定義事件的方式實現通信方法，當應用足夠復雜情況下，就可以使用 Vuex 進行數據管理。

GPU云服務器云服務器 js繼承的幾種方式服務器請求的幾種方式 java創建對象的幾種方式最基本的幾種

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102670.html

聊聊Vue.js組件間通信的幾種姿勢

摘要：子組件向父組件通信方法一使用事件父組件向子組件傳遞事件方法，子組件通過觸發事件，回調給父組件。非父子組件兄弟組件之間的數據傳遞非父子組件通信，官方推薦使用一個實例作為中央事件總線。寫在前面因為對Vue.js很感興趣，而且平時工作的技術棧也是Vue.js，這幾個月花了些時間研究學習了一下Vue.js源碼，并做了總結與輸出。文章的原地址：https://github.com/answ...

Profeel 2019-08-21 17:11 評論0 收藏0
淺談Vue 中的組件

摘要：淺談中的組件一初識組件組件是最強大的功能之一。組件可以擴展元素，封裝可重用的代碼。例子我是組件我要把中的數據傳給我是組件中央事件總線我是用來接收從傳過來的數據我是中的數據我是根組件的數據淺談 vue 中的組件一、初識組件組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。 1、定義組件 Vue自定義組件分為兩種：全局...

ls0609 2019-08-23 17:52 評論0 收藏0
vue組件間通信六種方式（完整版）

摘要：本文總結了組件間通信的幾種方式，如和，以通俗易懂的實例講述這其中的差別及使用場景，希望對小伙伴有些許幫助。狀態改變提交操作方法。前言組件是 vue.js最強大的功能之一，而組件實例的作用域是相互獨立的，這就意味著不同組件之間的數據無法相互引用。一般來說，組件可以有以下幾種關系： showImg(https://user-gold-cdn.xitu.io/2019/5/17/16ac35bf...

DDreach 2019-05-21 16:37 評論0 收藏0
vue組件間通信六種方式（完整版）

摘要：本文總結了組件間通信的幾種方式，如和，以通俗易懂的實例講述這其中的差別及使用場景，希望對小伙伴有些許幫助。狀態改變提交操作方法。前言組件是 vue.js最強大的功能之一，而組件實例的作用域是相互獨立的，這就意味著不同組件之間的數據無法相互引用。一般來說，組件可以有以下幾種關系：showImg(https://segmentfault.com/img/remote/146000001...

frontoldman 2019-08-26 13:48 評論0 收藏0
React 中組件間通信的幾種方式

摘要：在使用的過程中，不可避免的需要組件間進行消息傳遞通信，組件間通信大體有下面幾種情況父組件向子組件通信子組件向父組件通信非嵌套組件間通信跨級組件之間通信父組件向子組件通信父組件通過向子組件傳遞，子組件得到后進行相應的處理。在使用 React 的過程中，不可避免的需要組件間進行消息傳遞（通信），組件間通信大體有下面幾種情況：父組件向子組件通信子組件向父組件通信非嵌套組件間通信跨...

Anshiii 2019-07-01 10:49 評論0 收藏0