Vue 組件間傳參最佳實踐

huashiou 發(fā)布于2019-08-23 18:18 / 3457人閱讀

摘要：父子組件間的數(shù)據(jù)傳遞從父組件獲取子組件的數(shù)據(jù)通過綁定將父組件的數(shù)據(jù)關聯(lián)到子組件，并修飾或者用同步來自子組件的數(shù)據(jù)變化使用父組件子組件默認初始值是，所以是顯示的關閉父組件子組件綁定事件監(jiān)聽器，當子組件狀態(tài)或者數(shù)據(jù)發(fā)生變化時，觸發(fā)事

1.父子組件間的數(shù)據(jù)傳遞 1.1從父組件獲取子組件的數(shù)據(jù)

1.1.1通過綁定 props 將父組件的數(shù)據(jù)關聯(lián)到子組件，并修飾 .sync 或者用 v-model 同步來自子組件的數(shù)據(jù)變化

//使用.sync ：

//父組件



//子組件

// v-model :

//父組件：



//子組件：

1.1.2綁定 listener 事件監(jiān)聽器，當子組件狀態(tài)或者數(shù)據(jù)發(fā)生變化時，觸發(fā)事件并將數(shù)據(jù)傳遞到父組件

$listeners 和 $attrs 兩者表面層都是一個意思，$attrs 是向下傳遞數(shù)據(jù)，$listeners 是向下傳遞方法，通過手動去調(diào)用 $listeners 對象里的方法，原理就是 $emit 監(jiān)聽事件，$listeners 也可以看成一個包裹監(jiān)聽事件的一個對象。

// 父組件：



//子組件：



//孫子組件：

1.2從子組件獲取父組件的數(shù)據(jù)

1.2.1 獲取 props 或者 $attrs 傳下來的數(shù)據(jù)

//父組件:



//子組件：



//孫子組件：

2.兄弟組件間的數(shù)據(jù)傳遞 處于兄弟關系的組件

2.1通過 EventBus 或者 $root 去注冊事件，由兄弟組件去監(jiān)聽事件傳遞過來的數(shù)據(jù)變化

2.2 在 Vuex 存放狀態(tài)，并在兩個組件中都監(jiān)聽狀態(tài)變化
2.3 在父組件上綁定狀態(tài)，并通過 v-model 或者 .sync 綁定到兩個兄弟組件中去，以同步數(shù)據(jù)變化

3.祖孫組件間的數(shù)據(jù)傳遞 3.1孫組件被直接寫在了祖先組件的 template 內(nèi)

在 Vue 中，處于祖孫關系的組件，而且孫組件被直接寫在了祖先組件的 template 內(nèi)，要從祖先組件獲取孫組件的數(shù)據(jù)，有以下幾種方式:

3.1.1可以在模板上給孫組件綁定 ref 并通過 $refs 調(diào)用孫組件的方法獲取數(shù)據(jù)

//父組件



//子組件：



//孫子組件：

3.1.2 可以在模板上給孫組件綁定 listener 獲取孫組件傳過來的數(shù)據(jù)
3.1.3 可以在模板上給孫組件綁定 v-model 或者 .sync 同步孫組件的數(shù)據(jù)

3.2孫組件不在祖先組件的 template 內(nèi)，要從祖先組件獲取孫組件的數(shù)據(jù)

3.2.1先在子組件上綁定 v-model 或者 .sync，接著再在子組件的模板上通過 v-model 或者 .sync 綁定孫組件，以同步孫組件的數(shù)據(jù)
3.2.2現(xiàn)在孫組件上綁定 listener，再給子組件綁定 listener，數(shù)據(jù)由事件層層上傳給祖先組件

3.3孫組件在祖先組件的 template 內(nèi)，要從孫組件獲取祖先組件的數(shù)據(jù)

3.3.1直接在祖先組件的 template 中通過 v-bind 將數(shù)據(jù)傳遞到孫組件中，孫組件通過 props 或者 $attrs 進行接收

3.4孫組件不在祖先組件的 template 內(nèi)，要從孫組件獲取祖先組件的數(shù)據(jù)

3.4.1先在子組件上 v-bind 綁定數(shù)據(jù)，接著再在子組件上通過 v-bind 綁定孫組件，數(shù)據(jù)層層向下傳遞
3.4.2孫組件在 EventBus 中注冊事件，監(jiān)聽來自祖先組件觸發(fā)的事件數(shù)據(jù)
3.4.3祖先組件將數(shù)據(jù)掛到 Vuex 中，再由孫組件從 Vuex 中去獲取數(shù)據(jù)

GPU云服務器云服務器最佳實踐 webrtc最佳實踐 cdn最佳實踐 vpc最佳實踐

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

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

React Native 傳參的五種方式

摘要：在中由于業(yè)務的需要我們往往要在諸多的頁面間，組件之間做一些參數(shù)的傳遞與管理在這里我總結(jié)了幾大經(jīng)過驗證，穩(wěn)定好用的方式給大家導航傳值推薦指數(shù)適用范圍相鄰頁面間傳值兼容性原理為頁面的上掛載了對象可用來做路由跳轉(zhuǎn)，在做頁面跳轉(zhuǎn)時可以攜帶參數(shù)回調(diào)方在React Native 中由于業(yè)務的需要, 我們往往要在諸多的頁面間，組件之間做一些參數(shù)的傳遞與管理, 在這里我總結(jié)了幾大經(jīng)過驗證，穩(wěn)定好用的...

cnTomato 2019-08-26 13:52 評論0 收藏0
Vue2從0到1(四)：Vue組件化及組件間傳值

摘要：前面講了環(huán)境的搭建用打包和的使用以及的使用下面講一下組件化及組件間傳值主要包括父子組件間傳值，兄弟組件間傳值，不相關組件間傳值。組件化及組件間傳值組件化組件是最強大的功能之一。前面講了環(huán)境的搭建用webpack打包vue和Vue-router的使用以及vuex的使用下面講一下Vue組件化及組件間傳值：主要包括父子組件間傳值，兄弟組件間傳值，不相關組件間傳值。 10.Vue組件...

geekzhou 2019-08-21 17:04 評論0 收藏0
Vue 組件間傳值

摘要：前言作為現(xiàn)在比較火的框架之一，相信您在使用的過程中，也會遇到組件間傳值的情況，本文將講解幾種組件間傳值的幾種方法，跟著小編一起來學習一下吧實現(xiàn)注意學習本文，需要您對有一定的了解。為了便于講解，以下方法均假設父組件是，子組件是，兄弟組件是。前言 Vue 作為現(xiàn)在比較火的框架之一，相信您在使用的過程中，也會遇到組件間傳值的情況，本文將講解幾種 Vue 組件間傳值的幾種方法，跟著小編一起來...

VishKozus 2019-08-23 15:07 評論0 收藏0
vue 組件間傳值

摘要：父組件給子組件傳值父組件二哈子組件子組件給父組件父組件子組件點擊啦啦啦啦定義狀態(tài)中引入傳值取值地址傳值 1、父組件給子組件傳值父組件： import child from ./child.vue export default { components: {child}, data(){ return {name:二哈} } ...

sourcenode 2019-08-23 14:02 評論0 收藏0
[MUI] mui框架實現(xiàn)頁面間傳值

摘要：參考通過本地儲存特性檢測參考利用傳參在頁面跳轉(zhuǎn)的時候通過設置添加參數(shù)，在接收參數(shù)的頁面通過獲取參數(shù)字符串。發(fā)送參數(shù)的頁面接收參數(shù)的頁面獲取中的參數(shù)獲取中的參數(shù)其他參考資料頁面?zhèn)鲄⒔K極版青峰專欄博客頻道本文地址 1 ：通過MUI封裝的openWindow 方法: mui.openWindow({ url:new-page-url, id:new-page-id, ...

劉永祥 2019-08-29 12:33 評論0 收藏0