Vue父子組件相互傳值

1. 父組件向子組件傳值

??? 子組件在props中創(chuàng)建一個(gè)屬性酱畅,用以接收父組件傳過(guò)來(lái)的值

??? 父組件中注冊(cè)子組件

??? 在子組件標(biāo)簽中添加子組件props中創(chuàng)建的屬性

??? 把需要傳給子組件的值賦給該屬性

2. 子組件向父組件傳值

子組件中需要以某種方式例如input事件的方法來(lái)觸發(fā)一個(gè)自定義事件

將需要傳的值作為$emit的第二個(gè)參數(shù)级遭,該值將作為實(shí)參傳給響應(yīng)自定義事件的方法

在父組件中注冊(cè)子組件并在子組件標(biāo)簽上綁定對(duì)自定義事件的監(jiān)聽(tīng)

?

3. 父子組件相互傳值

例子效果:父組件和子組件中各有一個(gè)input標(biāo)簽和一個(gè)p標(biāo)簽纷责,通過(guò)父組件或子組件中的input進(jìn)行編輯,同步更改4個(gè)標(biāo)簽的顯示內(nèi)容梧田。

4. vue的$emit(event,[...args])

觸發(fā)當(dāng)前實(shí)例上的事件狡赐。附加參數(shù)都會(huì)傳給監(jiān)聽(tīng)器回調(diào)。

子組件通過(guò)$emit觸發(fā)父組件上綁定的自定義事件翔怎,將自身數(shù)據(jù)作為參數(shù)傳入事件函數(shù),在父組件的事件函數(shù)中將參數(shù)賦值給父組件的對(duì)應(yīng)變量。

示例赤套,App.vue中v-on為組件綁定事件(自定義事件)飘痛,子組件通過(guò)$emit觸發(fā)事件

總結(jié):無(wú)論是子組件向父組件傳值還是父組件向子組件傳值,他們都有一個(gè)共同點(diǎn)就是有中間介質(zhì)容握,子向父的介質(zhì)是自定義事件宣脉,父向子的介質(zhì)是props中的屬性。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末剔氏,一起剝皮案震驚了整個(gè)濱河市塑猖,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌谈跛,老刑警劉巖羊苟,帶你破解...
    沈念sama閱讀 212,542評(píng)論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異币旧,居然都是意外死亡践险,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,596評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門吹菱,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人彭则,你說(shuō)我怎么就攤上這事鳍刷。” “怎么了俯抖?”我有些...
    開(kāi)封第一講書(shū)人閱讀 158,021評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵输瓜,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我芬萍,道長(zhǎng)尤揣,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,682評(píng)論 1 284
  • 正文 為了忘掉前任柬祠,我火速辦了婚禮北戏,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘漫蛔。我一直安慰自己嗜愈,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,792評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布莽龟。 她就那樣靜靜地躺著蠕嫁,像睡著了一般。 火紅的嫁衣襯著肌膚如雪毯盈。 梳的紋絲不亂的頭發(fā)上剃毒,一...
    開(kāi)封第一講書(shū)人閱讀 49,985評(píng)論 1 291
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼赘阀。 笑死陪拘,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的纤壁。 我是一名探鬼主播左刽,決...
    沈念sama閱讀 39,107評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼酌媒!你這毒婦竟也來(lái)了欠痴?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 37,845評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤秒咨,失蹤者是張志新(化名)和其女友劉穎喇辽,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體雨席,經(jīng)...
    沈念sama閱讀 44,299評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡菩咨,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,612評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了陡厘。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片抽米。...
    茶點(diǎn)故事閱讀 38,747評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖糙置,靈堂內(nèi)的尸體忽然破棺而出云茸,到底是詐尸還是另有隱情,我是刑警寧澤谤饭,帶...
    沈念sama閱讀 34,441評(píng)論 4 333
  • 正文 年R本政府宣布标捺,位于F島的核電站,受9級(jí)特大地震影響揉抵,放射性物質(zhì)發(fā)生泄漏亡容。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,072評(píng)論 3 317
  • 文/蒙蒙 一冤今、第九天 我趴在偏房一處隱蔽的房頂上張望闺兢。 院中可真熱鬧,春花似錦辟汰、人聲如沸列敲。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,828評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)戴而。三九已至,卻和暖如春翩蘸,著一層夾襖步出監(jiān)牢的瞬間所意,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,069評(píng)論 1 267
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留扶踊,地道東北人泄鹏。 一個(gè)月前我還...
    沈念sama閱讀 46,545評(píng)論 2 362
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像秧耗,于是被迫代替她去往敵國(guó)和親备籽。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,658評(píng)論 2 350

推薦閱讀更多精彩內(nèi)容