摘要:老王用筆在紙上寫了好多內(nèi)容,把紙紙相當(dāng)于,也就是數(shù)據(jù)放進(jìn)了信封信封相當(dāng)于屬性,也就是里,然后給了郵局相當(dāng)于相當(dāng)于一個(gè)中介,快遞員進(jìn)行派送,小明來到郵箱相當(dāng)于,看到里邊有封信相當(dāng)于父組件的值,拿了出來。
講故事前先講代碼
父組件向子組件傳值父組件數(shù)據(jù)傳遞給子組件可以通過props屬性來實(shí)現(xiàn)
父組件:
子組件:
父向子傳值總結(jié):
v-bind:dataOfChild="dataOfParent"(父組件)====>props:["dataOfChild"](子組件)子組件向父組件傳值
子組件:
父組件:
子向父傳值總結(jié):
this.$emit("parentFunction","helloworld")(子組件)====> v-on:parentFunction="customParentFunction"(父組件)====> customParentFunction:function (data) {}(父組件)
話說,在遙遠(yuǎn)的大山那邊,有一對父子,父親叫老王,兒子叫小明。父親由于歲數(shù)大了,平常就在家干點(diǎn)農(nóng)活,小明為了養(yǎng)家,外出打工。
有一天,小明想爸爸了,拿起手機(jī)給爸爸發(fā)短信,子組件主動(dòng)向父組件傳值,小明拿起手機(jī),調(diào)用sendDataToParent方法,在通訊錄找到了爸爸的手機(jī)號(hào),this.$emit的第一個(gè)參數(shù),函數(shù)名,然后拿起手機(jī),摳了一堆字:爸爸我想你了,最近怎么樣?this.$emit的第二個(gè)參數(shù),內(nèi)容,然后發(fā)送~,短信傳到了信號(hào)塔,child-component相當(dāng)于基站,基站對所有短信進(jìn)行監(jiān)聽,正好,基站的列表里有小明父親的名單,===》v-on:parentFunction,然后,短信又由基站傳到了老王那邊,老王的手機(jī)鈴想了:蒼茫的天涯是我的愛 綿綿的青山腳下花正開~~~響鈴相當(dāng)于調(diào)用customParentFunction方法,然后,值就傳過來了。
但是呢,小明在外打工,有時(shí)工作比較忙,忘了給爸爸發(fā)短信,所以老王想兒子了,但老王比較保守,又沒大上過學(xué),也不會(huì)打字,所以寫了封信,去了郵局。
老王用筆在紙上寫了好多內(nèi)容,把紙 紙相當(dāng)于dataOfParent,也就是數(shù)據(jù) 放進(jìn)了信封信封相當(dāng)于屬性,也就是v-bind:dataOfChild里,然后給了郵局相當(dāng)于child-component,相當(dāng)于一個(gè)中介,快遞員進(jìn)行派送,小明來到郵箱相當(dāng)于props,看到里邊有封信相當(dāng)于父組件的值,拿了出來。
本文是作者第一次用情景故事的形式來寫博客,也是一次新的嘗試,如有不足,或者錯(cuò)的地方,還請大家多多指點(diǎn)。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/105039.html
摘要:組件之間的通訊分為三種父給子傳子給父傳兄弟組件之間的通訊父組件給子組件傳值子組件嵌套在父組件內(nèi)部,父組件給子組件傳遞一個(gè)標(biāo)識(shí),在子組件內(nèi)部用接收,子組件在模板里可以通過的形式進(jìn)行使用。 組件之間的通訊分為三種 父給子傳 子給父傳 兄弟組件之間的通訊 1 父組件給子組件傳值 子組件嵌套在父組件內(nèi)部,父組件給子組件傳遞一個(gè)標(biāo)識(shí),在子組件內(nèi)部用props接收,子組件在模板里可以通過{{}}的...
摘要:組件之間的通訊分為三種父給子傳子給父傳兄弟組件之間的通訊父組件給子組件傳值子組件嵌套在父組件內(nèi)部,父組件給子組件傳遞一個(gè)標(biāo)識(shí),在子組件內(nèi)部用接收,子組件在模板里可以通過的形式進(jìn)行使用。 組件之間的通訊分為三種 父給子傳 子給父傳 兄弟組件之間的通訊 1 父組件給子組件傳值 子組件嵌套在父組件內(nèi)部,父組件給子組件傳遞一個(gè)標(biāo)識(shí),在子組件內(nèi)部用props接收,子組件在模板里可以通過{{}}的...
摘要:組件之間的通訊分為三種父給子傳子給父傳兄弟組件之間的通訊父組件給子組件傳值子組件嵌套在父組件內(nèi)部,父組件給子組件傳遞一個(gè)標(biāo)識(shí),在子組件內(nèi)部用接收,子組件在模板里可以通過的形式進(jìn)行使用。 組件之間的通訊分為三種 父給子傳 子給父傳 兄弟組件之間的通訊 1 父組件給子組件傳值 子組件嵌套在父組件內(nèi)部,父組件給子組件傳遞一個(gè)標(biāo)識(shí),在子組件內(nèi)部用props接收,子組件在模板里可以通過{{}}的...
摘要:我們需要在里改動(dòng)一下代碼首先就是綁定一個(gè)自定義事件再增加然后在中變成就是觸發(fā)父組件中的方法所以,觸發(fā)了父組件的函數(shù),改變了父組件的的值,父組件再通過傳值給子組件。從而實(shí)現(xiàn)數(shù)據(jù)傳遞,父子組件通信。 一、vue的父子組件之間是如何傳值的? 首先呢,需要說說的是,vue既然有雙向綁定,那為何會(huì)有父子組件之間的傳值問題?這個(gè)問題也簡單,vue的組件會(huì)供其他的vue頁面進(jìn)行調(diào)用,如果數(shù)組都是雙...
摘要:子實(shí)例可以用訪問父實(shí)例,子實(shí)例被推入父實(shí)例的數(shù)組中。節(jié)制地使用和它們的主要目的是作為訪問組件的應(yīng)急方法。更推薦用和實(shí)現(xiàn)父子組件通信我是父組件中的數(shù)據(jù)我是我是號(hào)組件我是 利用props父子傳值 父組件,可以在引用子組件的時(shí)候, 通過 屬性綁定(v-bind:) 的形式, 把 需要傳遞給 子組件的數(shù)據(jù),以屬性綁定的形式,傳遞到子組件內(nèi)部,供子組件使用 創(chuàng)建 Vue 實(shí)例,得到 Vie...
閱讀 609·2023-04-25 16:00
閱讀 1666·2019-08-26 13:54
閱讀 2526·2019-08-26 13:47
閱讀 3493·2019-08-26 13:39
閱讀 1087·2019-08-26 13:37
閱讀 2787·2019-08-26 10:21
閱讀 3564·2019-08-23 18:19
閱讀 1626·2019-08-23 18:02