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

資訊專欄INFORMATION COLUMN

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

TalkingData / 456人閱讀

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

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

Vue父子組件通訊的方法其實有很多，本文只是做一個總結(jié)，說說他們的優(yōu)缺點，具體如何使用相關(guān)文檔和網(wǎng)上大神已經(jīng)總結(jié)的很多里，這里就不再說明。

1.Vuex 介紹 
Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，
并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。Vuex 也集成到 Vue 的官方調(diào)試工具 devtools extension，
提供了諸如零配置的 time-travel 調(diào)試、狀態(tài)快照導(dǎo)入導(dǎo)出等高級調(diào)試功能。

vuex是我平時項目里經(jīng)常用的工具之一，相信大家在項目中肯定也經(jīng)常會使用它

使用方法

請參考官網(wǎng)傳送門

優(yōu)缺點

優(yōu)點

解決了多層組件之間繁瑣的事件傳播。

解決了多組件依賴統(tǒng)同一狀態(tài)的問題。

單向數(shù)據(jù)流

為Vue量身定做，學(xué)習(xí)成本不高

缺點

不能做數(shù)據(jù)持久化，刷新頁面就要重制，要做數(shù)據(jù)持久化可以考慮使用localstorage。

增加額外的代碼體積，簡單的業(yè)務(wù)場景不建議使用。

2.EventBus 介紹

通過共享一個vue實例，使用該實例的$on以及$emit實現(xiàn)數(shù)據(jù)傳遞。

使用方法

下面是簡單的使用方法

// 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)
  }
}
優(yōu)缺點

優(yōu)點

解決了多層組件之間繁瑣的事件傳播。

使用原理十分簡單，代碼量少。

缺點

由于是都使用一個Vue實例，所以容易出現(xiàn)重復(fù)觸發(fā)的情景，例如：

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

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

在for出來的組件里注冊。

項目一大用這種方式管理事件會十分混亂，這時候建議用vuex。

3.props和$emit/$on 介紹

最基本的父組件給子組件傳遞數(shù)據(jù)方式，將我們自定義的屬性傳給子組件,子組件通過$emit方法，觸發(fā)父組件v-on的事件，從而實現(xiàn)子組件觸發(fā)父組件方法

使用方法

props使用傳送門

$emit/$on使用傳送門

優(yōu)缺點

優(yōu)點

使用最為簡單，也是父子組件傳遞最常見的方法。

Vue為給props提供了類型檢查支持。

$emit不會修改到別的組件的同名事件，因為他只能觸發(fā)父級的事件，這里和event-bus不同

缺點

單一組件層級一深需要逐層傳遞，會有很多不必要的代碼量。

不能解決了多組件依賴統(tǒng)同一狀態(tài)的問題。

Tips

$attrs/$listeners可以將父組件的props和事件監(jiān)聽器繼承給子元素，在子組件可以調(diào)用到父組件的事件和props

$attrs使用傳送門

$listeners使用傳送門

4.provide/inject 介紹

在父組件上通過provide提供給后代組件的數(shù)據(jù)/方法，在后代組件上通過inject來接收被注入的數(shù)據(jù)/方法。

使用方法

官方傳送門

優(yōu)缺點

優(yōu)點

不用像props一層層傳遞，可以跨層級傳遞。

缺點

用這種方式傳遞的屬性是非響應(yīng)式的，所以盡可能來傳遞一些靜態(tài)屬性。

引用官網(wǎng)的話是它將你的應(yīng)用以目前的組件組織方式耦合了起來，使重構(gòu)變得更加困難。，我對這句話的理解是用了provide/inject你就要遵循它的組件組織方式，在項目的重構(gòu)時如果要破壞這個組織方式會有額外的開發(fā)成本，其實event-bus也有這個問題。

5.slot 介紹

你可以在組件的html模版里添加自定義內(nèi)容，這個內(nèi)容可以是任何代碼模版，就像：


  
  
  Your Profile

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

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

使用方法

官方傳送門

優(yōu)缺點

優(yōu)點

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

復(fù)用性好,適合做組件開發(fā)。

缺點

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

6.$parent/$children 介紹

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

使用方法

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

優(yōu)缺點

優(yōu)點

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

缺點

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/99957.html

相關(guān)文章

  • 面試小結(jié)（一）

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

    xiaodao 評論0 收藏0

  • 面試小結(jié)（一）

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

    SnaiLiu 評論0 收藏0

  • 面試小結(jié)（一）

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

    shmily 評論0 收藏0

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

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

    CloudDeveloper 評論0 收藏0

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

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

    netmou 評論0 收藏0

發(fā)表評論

0條評論

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