一個故事講懂vue父子組件傳值

xi4oh4o 發布于2019-08-23 18:19 / 3537人閱讀

摘要：老王用筆在紙上寫了好多內容，把紙紙相當于，也就是數據放進了信封信封相當于屬性，也就是里，然后給了郵局相當于相當于一個中介，快遞員進行派送，小明來到郵箱相當于，看到里邊有封信相當于父組件的值，拿了出來。

講故事前先講代碼

父組件向子組件傳值

父組件數據傳遞給子組件可以通過props屬性來實現
父組件：

子組件：

父向子傳值總結：

v-bind:dataOfChild="dataOfParent"(父組件)====>props:["dataOfChild"](子組件)

子組件向父組件傳值

子組件：

父組件：

子向父傳值總結：

this.$emit("parentFunction","helloworld")(子組件)====>
v-on:parentFunction="customParentFunction"(父組件)====>
customParentFunction:function (data) {}(父組件)

接下來是強化記憶階段：

情節一

話說，在遙遠的大山那邊，有一對父子，父親叫老王，兒子叫小明。父親由于歲數大了，平常就在家干點農活，小明為了養家，外出打工。
有一天，小明想爸爸了，拿起手機給爸爸發短信，子組件主動向父組件傳值，小明拿起手機，調用sendDataToParent方法,在通訊錄找到了爸爸的手機號，this.$emit的第一個參數，函數名，然后拿起手機，摳了一堆字：爸爸我想你了，最近怎么樣？this.$emit的第二個參數，內容，然后發送~，短信傳到了信號塔，child-component相當于基站，基站對所有短信進行監聽，正好，基站的列表里有小明父親的名單，===》v-on:parentFunction，然后，短信又由基站傳到了老王那邊，老王的手機鈴想了：蒼茫的天涯是我的愛綿綿的青山腳下花正開~~~響鈴相當于調用customParentFunction方法，然后，值就傳過來了。

情節二

但是呢，小明在外打工，有時工作比較忙，忘了給爸爸發短信，所以老王想兒子了，但老王比較保守，又沒大上過學，也不會打字，所以寫了封信，去了郵局。

老王用筆在紙上寫了好多內容，把紙 紙相當于dataOfParent，也就是數據 放進了信封信封相當于屬性，也就是v-bind:dataOfChild里，然后給了郵局相當于child-component,相當于一個中介，快遞員進行派送，小明來到郵箱相當于props，看到里邊有封信相當于父組件的值，拿了出來。
本文是作者第一次用情景故事的形式來寫博客，也是一次新的嘗試，如有不足，或者錯的地方，還請大家多多指點。

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

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

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

Vue 組件間的傳值（通訊）

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

CloudDeveloper 2019-08-29 16:12 評論0 收藏0
Vue 組件間的傳值（通訊）

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

netmou 2019-08-23 10:31 評論0 收藏0
Vue 組件間的傳值（通訊）

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

source 2019-08-02 11:03 評論0 收藏0
簡單說說vue的父子組件，父子組件傳值和vuex

摘要：我們需要在里改動一下代碼首先就是綁定一個自定義事件再增加然后在中變成就是觸發父組件中的方法所以，觸發了父組件的函數，改變了父組件的的值，父組件再通過傳值給子組件。從而實現數據傳遞，父子組件通信。一、vue的父子組件之間是如何傳值的？首先呢，需要說說的是，vue既然有雙向綁定，那為何會有父子組件之間的傳值問題？這個問題也簡單，vue的組件會供其他的vue頁面進行調用，如果數組都是雙...

Tecode 2019-08-22 18:31 評論0 收藏0
Vue 父子傳值與子父傳值

摘要：子實例可以用訪問父實例，子實例被推入父實例的數組中。節制地使用和它們的主要目的是作為訪問組件的應急方法。更推薦用和實現父子組件通信我是父組件中的數據我是我是號組件我是利用props父子傳值父組件，可以在引用子組件的時候，通過屬性綁定（v-bind:）的形式, 把需要傳遞給子組件的數據，以屬性綁定的形式，傳遞到子組件內部，供子組件使用創建 Vue 實例，得到 Vie...

aisuhua 2019-08-23 17:14 評論0 收藏0