幾種常見的Vue組件間的傳參方式

幾種常見的Vue組件間的傳參方式

Vue父子組件通信的方法其實有不少，本文只是作一個總結，說說他們的優缺點，具體如何使用相關文檔和網上大神已經總結的不少裏，這裏就再也不說明。

1.Vuex

介紹

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，
並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension，
提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。

vuex是我平時項目裏常常用的工具之一，相信你們在項目中確定也常常會使用它

使用方法

請參考官網傳送門

優缺點

• 優勢

  • 解決了多層組件之間繁瑣的事件傳播。
  • 解決了多組件依賴統同一狀態的問題。
  • 單向數據流
  • 爲Vue量身定作，學習成本不高

• 缺點

  • 不能作數據持久化，刷新頁面就要重製，要作數據持久化能夠考慮使用localstorage。
  • 增長額外的代碼體積，簡單的業務場景不建議使用。

2.EventBus

介紹

經過共享一個vue實例，使用該實例的$on以及$emit實現數據傳遞。

使用方法

下面是簡單的使用方法

// bus.js
import Vue from 'vue'
export default new Vue({})

// component-a.js
import bus from './bus.js'
export default {
  created () {
    bus.$on('event-name', (preload) => {
      // ...
    })
  }
}

// component-b.js
import bus from './bus.js'
export default {
  created () {
    bus.$emit('event-name', preload)
  }
}

優缺點

• 優勢

  • 解決了多層組件之間繁瑣的事件傳播。
  • 使用原理十分簡單，代碼量少。

• 缺點

  • 因爲是都使用一個Vue實例，因此容易出現重複觸發的情景，例如：

    1. 多人開發時，A、B兩我的定義了同一個事件名。
    2. 兩個頁面都定義了同一個事件名，而且沒有用$off銷燬（常出如今路由切換時）。
    3. 在for出來的組件裏註冊。
  • 項目一大用這種方式管理事件會十分混亂，這時候建議用vuex。

3.props和\$emit/\$on

介紹

最基本的父組件給子組件傳遞數據方式，將咱們自定義的屬性傳給子組件,子組件經過$emit方法，觸發父組件v-on的事件，從而實現子組件觸發父組件方法

使用方法

props使用傳送門

\$emit/\$on使用傳送門

優缺點

• 優勢

  • 使用最爲簡單，也是父子組件傳遞最多見的方法。
  • Vue爲給props提供了類型檢查支持。
  • $emit不會修改到別的組件的同名事件，由於他只能觸發父級的事件，這裏和event-bus不一樣

• 缺點

  • 單一組件層級一深須要逐層傳遞，會有不少沒必要要的代碼量。
  • 不能解決了多組件依賴統同一狀態的問題。

Tips

\$attrs/\$listeners能夠將父組件的props和事件監聽器繼承給子元素，在子組件能夠調用到父組件的事件和props

$attrs使用傳送門

$listeners使用傳送門

4.provide/inject

介紹

在父組件上經過provide提供給後代組件的數據/方法，在後代組件上經過inject來接收被注入的數據/方法。

使用方法

官方傳送門

優缺點

• 優勢

  • 不用像props一層層傳遞，能夠跨層級傳遞。

• 缺點

  • 用這種方式傳遞的屬性是非響應式的，因此儘量來傳遞一些靜態屬性。
  • 引用官網的話是它將你的應用以目前的組件組織方式耦合了起來，使重構變得更加困難。，我對這句話的理解是用了provide/inject你就要遵循它的組件組織方式，在項目的重構時若是要破壞這個組織方式會有額外的開發成本，其實event-bus也有這個問題。

5.slot

介紹

你能夠在組件的html模版裏添加自定義內容，這個內容能夠是任何代碼模版，就像：

<navigation-link url="/profile">
  <!-- 添加一個 Font Awesome 圖標 -->
  <span class="fa fa-user"></span>
  Your Profile
</navigation-link>

父組件模板的全部東西都會在父級做用域內編譯；子組件模板的全部東西都會在子級做用域內編譯。

你也能夠經過slot-scope屬性來實現從子組件將一些信息傳遞給父組件，注意這個屬性是vue2.1.0+新增的。

使用方法

官方傳送門

優缺點

• 優勢

  • 能夠在父組件裏自定義插入到子組件裏的內容，雖然其餘屬性也能夠，可是我以爲slot更傾向於自定義的條件是來自於父容器中。
  • 複用性好,適合作組件開發。

• 缺點

  • 和props同樣不支持跨層級傳遞。

6.\$parent/\$children

介紹

經過\$parent/\$children能夠拿到父子組件的實例，從而調用實例裏的方法，實現父子組件通訊。並不推薦這種作法。

使用方法

經過this.$parent或者this.$children拿到父或子組件實例。官方傳送門

優缺點

• 優勢

  • 能夠拿到父子組件實例，從而擁有實例裏的全部屬性。

• 缺點

  • 用這種方法寫出來的組件十分難維護，由於你並不知道數據的來源是哪裏，有悖於單向數據流的原則
  • this.$children拿到的是一個數組，你並不能很準確的找到你要找的子組件的位置，尤爲是子組件多的時候。