国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

TalkingData / 461人閱讀

摘要：缺點用這種方法寫出來的組件十分難維護，因為你并不知道數據的來源是哪里，有悖于單向數據流的原則拿到的是一個數組，你并不能很準確的找到你要找的子組件的位置，尤其是子組件多的時候。

幾種常見的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實例，所以容易出現重復觸發的情景，例如：

多人開發時，A、B兩個人定義了同一個事件名。

兩個頁面都定義了同一個事件名，并且沒有用$off銷毀（常出現在路由切換時）。

在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模版里添加自定義內容，這個內容可以是任何代碼模版，就像：


  
  
  Your Profile

父組件模板的所有東西都會在父級作用域內編譯；子組件模板的所有東西都會在子級作用域內編譯。

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

使用方法

官方傳送門

優缺點

優點

可以在父組件里自定義插入到子組件里的內容，雖然其他屬性也可以，但是我覺得slot更傾向于自定義的條件是來自于父容器中。

復用性好,適合做組件開發。

缺點

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

6.$parent/$children 介紹

通過$parent/$children可以拿到父子組件的實例，從而調用實例里的方法，實現父子組件通信。并不推薦這種做法。

使用方法

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

優缺點

優點

可以拿到父子組件實例，從而擁有實例里的所有屬性。

缺點

用這種方法寫出來的組件十分難維護，因為你并不知道數據的來源是哪里，有悖于單向數據流的原則

this.$children拿到的是一個數組，你并不能很準確的找到你要找的子組件的位置，尤其是子組件多的時候。

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

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

相關文章

  • 面試小結（一）

    摘要：面試問到的問題繼承的幾種方法，，原形繼承面向對象的幾種方法五種方式對象字面量創建實例對象構造函數工廠模式用一個函數，通過傳遞參數返回對象。打包原理打包原理把所有依賴打包成一個文件，通過代碼分割成單元片段并按需加載。 面試問到的問題：1、繼承的幾種方法； Call，apply，原形繼承； 2、面向對象的幾種方法； 五種方式： 1）對象字面量：var obj={}; 2）創建實例對象：va...

    xiaodao 評論0 收藏0

  • 面試小結（一）

    摘要：面試問到的問題繼承的幾種方法，，原形繼承面向對象的幾種方法五種方式對象字面量創建實例對象構造函數工廠模式用一個函數，通過傳遞參數返回對象。打包原理打包原理把所有依賴打包成一個文件，通過代碼分割成單元片段并按需加載。 面試問到的問題：1、繼承的幾種方法； Call，apply，原形繼承； 2、面向對象的幾種方法； 五種方式： 1）對象字面量：var obj={}; 2）創建實例對象：va...

    SnaiLiu 評論0 收藏0

  • 面試小結（一）

    摘要：面試問到的問題繼承的幾種方法，，原形繼承面向對象的幾種方法五種方式對象字面量創建實例對象構造函數工廠模式用一個函數，通過傳遞參數返回對象。打包原理打包原理把所有依賴打包成一個文件，通過代碼分割成單元片段并按需加載。 面試問到的問題：1、繼承的幾種方法； Call，apply，原形繼承； 2、面向對象的幾種方法； 五種方式： 1）對象字面量：var obj={}; 2）創建實例對象：va...

    shmily 評論0 收藏0

  • Vue 組件間的傳值（通訊）

    摘要：組件之間的通訊分為三種父給子傳子給父傳兄弟組件之間的通訊父組件給子組件傳值子組件嵌套在父組件內部，父組件給子組件傳遞一個標識，在子組件內部用接收，子組件在模板里可以通過的形式進行使用。 組件之間的通訊分為三種 父給子傳 子給父傳 兄弟組件之間的通訊 1 父組件給子組件傳值 子組件嵌套在父組件內部，父組件給子組件傳遞一個標識，在子組件內部用props接收，子組件在模板里可以通過{{}}的...

    CloudDeveloper 評論0 收藏0

  • Vue 組件間的傳值（通訊）

    摘要：組件之間的通訊分為三種父給子傳子給父傳兄弟組件之間的通訊父組件給子組件傳值子組件嵌套在父組件內部，父組件給子組件傳遞一個標識，在子組件內部用接收，子組件在模板里可以通過的形式進行使用。 組件之間的通訊分為三種 父給子傳 子給父傳 兄弟組件之間的通訊 1 父組件給子組件傳值 子組件嵌套在父組件內部，父組件給子組件傳遞一個標識，在子組件內部用props接收，子組件在模板里可以通過{{}}的...

    netmou 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<