VUE父子組件傳遞數(shù)據(jù)

Vixb 發(fā)布于2019-08-23 15:09 / 1102人閱讀

摘要：同步或異步傳遞數(shù)據(jù)若父組件向子組件可能同步或異步傳遞數(shù)據(jù)，則首先子組件需要在或者中對(duì)目標(biāo)對(duì)象初始化，并且子組件中需要由傳遞的數(shù)據(jù)，并修改目標(biāo)對(duì)象。

1. 同步傳遞數(shù)據(jù)

父組件 food 通過 props 把值為 0 的 type 字段傳給子組件，子組件在初始化時(shí)可以拿到 type 字段，渲染出字符“0 水果”

// 父組件 food.vue


// 子組件 apple.vue

2 異步傳遞數(shù)據(jù)

要保證異步傳遞數(shù)據(jù)，根據(jù)VUE的雙向綁定原理，不難得知，異步傳遞的數(shù)據(jù)需要watch。

2.1 props

若props傳遞的數(shù)據(jù)關(guān)聯(lián)到模板中，則組件初始化時(shí)會(huì)watch該數(shù)據(jù)。可見下面代碼中的type和info。
若props傳遞的數(shù)據(jù)不關(guān)聯(lián)到模板，則為props傳遞的數(shù)據(jù)添加watch，在watch方法中修改關(guān)聯(lián)模板的對(duì)象。可見下面代碼中的child_type。此方法中，watch監(jiān)聽到的是是發(fā)生變化的props，故需要對(duì)目標(biāo)對(duì)象做初始化處理。

// 父組件 food.vue


// 子組件 apple.vue

2.2 vuex

數(shù)據(jù)存放在store中，父組件調(diào)用vuex中的方法改變數(shù)據(jù)。
若store的數(shù)據(jù)關(guān)聯(lián)子組件的模板，則子組件初始化時(shí)會(huì)watch該數(shù)據(jù)。
若store的數(shù)據(jù)不關(guān)聯(lián)子組件的模板，則為store的數(shù)據(jù)添加watch，在watch方法中修改關(guān)聯(lián)模板的對(duì)象。需要對(duì)關(guān)聯(lián)模板的對(duì)象初始化。

3. 同步或異步傳遞數(shù)據(jù)

若父組件向子組件可能同步或異步傳遞數(shù)據(jù)，則首先子組件需要在created或者computed中對(duì)目標(biāo)對(duì)象初始化，并且子組件中需要watch由props傳遞的數(shù)據(jù)，并修改目標(biāo)對(duì)象。

GPU云服務(wù)器云服務(wù)器 vue父子組件通訊父子組件父子組件通信父子組件通訊

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

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

相關(guān)文章

Vue 組件間通信方式

摘要：本身提供哪幾種通信方式首先靈感源于，支持雙向綁定，本質(zhì)還是單向數(shù)據(jù)流。跟一樣，組件間最基本的數(shù)據(jù)流是通過向子組件傳遞數(shù)據(jù)。但是在卻很少使用，因?yàn)榻M件可以自定義事件，即后面的組件間通信方式其實(shí)就是訂閱發(fā)布模式。例子是在 jsrun.net 平臺(tái)編寫，不支持移動(dòng)端平臺(tái)，所以本文建議在 PC 端進(jìn)行閱讀。 Vue 是數(shù)據(jù)驅(qū)動(dòng)的視圖框架，那么組件間的數(shù)據(jù)通信是必然的事情，那么組件間如何進(jìn)行數(shù)...

hss01248 2019-08-26 13:54 評(píng)論0 收藏0
vue中8種組件通信方式, 值得收藏!

摘要：一父組件通過的方式向子組件傳遞數(shù)據(jù)，而通過子組件可以向父組件通信。而且只讀，不可被修改，所有修改都會(huì)失效并警告。之前寫了一篇關(guān)于vue面試總結(jié)的文章, 有不少網(wǎng)友提出組件之間通信方式還有很多, 這篇文章便是專門總結(jié)組件之間通信的 vue是數(shù)據(jù)驅(qū)動(dòng)視圖更新的框架, 所以對(duì)于vue來說組件間的數(shù)據(jù)通信非常重要，那么組件之間如何進(jìn)行數(shù)據(jù)通信的呢？首先我們需要知道在vue中組件之間存在什么樣...

BicycleWarrior 2019-08-26 10:44 評(píng)論0 收藏0
vue父子組件間通信

摘要：為此可以使用為子組件指定一個(gè)索引。訪問子組件當(dāng)和一起使用時(shí)，是一個(gè)數(shù)組或?qū)ο螅鄳?yīng)的子組件。父子通信目前有四種方式： 1.父組件傳遞數(shù)據(jù)給子組件父組件數(shù)據(jù)如何傳遞給子組件呢？可以通過props屬性來實(shí)現(xiàn)父組件： //這里必須要用 - 代替駝峰data(){ return { msg: [1,2,3] };} 子組件通過props來接收數(shù)據(jù):方式1：props: [childMs...

617035918 2019-08-23 11:51 評(píng)論0 收藏0
vue組件間通信、數(shù)據(jù)傳遞（父子組件，同級(jí)組件）

總結(jié)一下對(duì)vue組件通信的理解和使用。一、組件目錄結(jié)構(gòu) 父組件：app.vue 子組件：page1.vue 子組件：page2.vue 父組件 app.vue 請(qǐng)輸入單價(jià): import Page1 from ./components/page1; import Page2 from ./components/page2; export de...

Harpsichord1207 2019-08-21 17:28 評(píng)論0 收藏0
vue組件間通信、數(shù)據(jù)傳遞（父子組件，同級(jí)組件）

總結(jié)一下對(duì)vue組件通信的理解和使用。一、組件目錄結(jié)構(gòu) 父組件：app.vue 子組件：page1.vue 子組件：page2.vue 父組件 app.vue 請(qǐng)輸入單價(jià): import Page1 from ./components/page1; import Page2 from ./components/page2; export de...

tunny 2019-08-01 17:58 評(píng)論0 收藏0
Vue父子組件通信的三兩事（prop、emit）

摘要：的單向數(shù)據(jù)傳遞直接作為一個(gè)本地變量下面是我的子組件這是父組件給我傳的數(shù)據(jù)運(yùn)行結(jié)果如下圖子組件向父組件傳遞數(shù)據(jù)基本使用子組件向父組件傳遞數(shù)據(jù)，不能像上面一樣實(shí)時(shí)的傳遞數(shù)據(jù)，必須通過事件觸發(fā)。組件是Vue核心功能之一，合理的組件化，可以減少我們代碼的冗余，提高項(xiàng)目的可維護(hù)性。下面，我將由淺入深的講Vue的組件在講之前，首先我們先了解一下組件的命名。 HTML是對(duì)特征名不敏感的語(yǔ)言，他...

darcrand 2019-08-23 14:56 評(píng)論0 收藏0