Vue 組件間傳參最佳實踐

huashiou 發布于2019-08-23 18:18 / 3471人閱讀

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

1.父子組件間的數據傳遞 1.1從父組件獲取子組件的數據

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

//使用.sync ：

//父組件



//子組件

// v-model :

//父組件：



//子組件：

1.1.2綁定 listener 事件監聽器，當子組件狀態或者數據發生變化時，觸發事件并將數據傳遞到父組件

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

// 父組件：



//子組件：



//孫子組件：

1.2從子組件獲取父組件的數據

1.2.1 獲取 props 或者 $attrs 傳下來的數據

//父組件:



//子組件：



//孫子組件：

2.兄弟組件間的數據傳遞 處于兄弟關系的組件

2.1通過 EventBus 或者 $root 去注冊事件，由兄弟組件去監聽事件傳遞過來的數據變化

2.2 在 Vuex 存放狀態，并在兩個組件中都監聽狀態變化
2.3 在父組件上綁定狀態，并通過 v-model 或者 .sync 綁定到兩個兄弟組件中去，以同步數據變化

3.祖孫組件間的數據傳遞 3.1孫組件被直接寫在了祖先組件的 template 內

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

3.1.1可以在模板上給孫組件綁定 ref 并通過 $refs 調用孫組件的方法獲取數據

//父組件



//子組件：



//孫子組件：

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

3.2孫組件不在祖先組件的 template 內，要從祖先組件獲取孫組件的數據

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

3.3孫組件在祖先組件的 template 內，要從孫組件獲取祖先組件的數據

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

3.4孫組件不在祖先組件的 template 內，要從孫組件獲取祖先組件的數據

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

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

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

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

React Native 傳參的五種方式

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

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

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

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

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

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

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

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

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

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