VUE父子組件傳遞數據

Vixb 發布于2019-08-23 15:09 / 1110人閱讀

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

1. 同步傳遞數據

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

// 父組件 food.vue


// 子組件 apple.vue

2 異步傳遞數據

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

2.1 props

若props傳遞的數據關聯到模板中，則組件初始化時會watch該數據。可見下面代碼中的type和info。
若props傳遞的數據不關聯到模板，則為props傳遞的數據添加watch，在watch方法中修改關聯模板的對象。可見下面代碼中的child_type。此方法中，watch監聽到的是是發生變化的props，故需要對目標對象做初始化處理。

// 父組件 food.vue


// 子組件 apple.vue

2.2 vuex

數據存放在store中，父組件調用vuex中的方法改變數據。
若store的數據關聯子組件的模板，則子組件初始化時會watch該數據。
若store的數據不關聯子組件的模板，則為store的數據添加watch，在watch方法中修改關聯模板的對象。需要對關聯模板的對象初始化。

3. 同步或異步傳遞數據

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

GPU云服務器云服務器 vue父子組件通訊父子組件父子組件通信父子組件通訊

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

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

Vue 組件間通信方式

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

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

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

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

摘要：為此可以使用為子組件指定一個索引。訪問子組件當和一起使用時，是一個數組或對象，包含相應的子組件。父子通信目前有四種方式： 1.父組件傳遞數據給子組件父組件數據如何傳遞給子組件呢？可以通過props屬性來實現父組件： //這里必須要用 - 代替駝峰data(){ return { msg: [1,2,3] };} 子組件通過props來接收數據:方式1：props: [childMs...

617035918 2019-08-23 11:51 評論0 收藏0
vue組件間通信、數據傳遞（父子組件，同級組件）

總結一下對vue組件通信的理解和使用。一、組件目錄結構父組件：app.vue 子組件：page1.vue 子組件：page2.vue 父組件 app.vue 請輸入單價: import Page1 from ./components/page1; import Page2 from ./components/page2; export de...

Harpsichord1207 2019-08-21 17:28 評論0 收藏0
vue組件間通信、數據傳遞（父子組件，同級組件）

總結一下對vue組件通信的理解和使用。一、組件目錄結構父組件：app.vue 子組件：page1.vue 子組件：page2.vue 父組件 app.vue 請輸入單價: import Page1 from ./components/page1; import Page2 from ./components/page2; export de...

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

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

darcrand 2019-08-23 14:56 評論0 收藏0