Vue 之孫組件向爺組件通信

Lionad-Morotar 發(fā)布于2019-08-23 16:58 / 1452人閱讀

摘要：如何把孫組件內(nèi)特定的數(shù)據(jù)傳給爺組件例如把孫組件的名字傳給爺組件并在爺組件上顯示思路在孫組件被點(diǎn)擊后事件和孫組件的名字在父組件上監(jiān)聽孫組件出的事件，再次事件在爺組件上監(jiān)聽父組件出的事件，并觸發(fā)處理函數(shù)這個(gè)處理函數(shù)將父組件傳出的子組件名字顯示在

如何把孫組件內(nèi)特定的數(shù)據(jù)傳給爺組件？

例如
把孫組件的名字傳給爺組件并在爺組件上顯示

思路
在孫組件被點(diǎn)擊后 emit 事件 1 和孫組件的名字
在父組件上監(jiān)聽孫組件 emit 出的事件 1，再次 emit 事件 2
在爺組件上監(jiān)聽父組件 emit 出的事件 2，并觸發(fā)處理函數(shù)
這個(gè)處理函數(shù)將父組件傳出的子組件名字顯示在父組件上



  
    
    
    
  
  
    
      child name: {{child}}

GPU云服務(wù)器云服務(wù)器 vue組件 vue組件開發(fā) vue父子組件通訊 vue輪播組件

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

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

相關(guān)文章

聊聊Vue.js組件間通信的幾種姿勢(shì)

摘要：子組件向父組件通信方法一使用事件父組件向子組件傳遞事件方法，子組件通過觸發(fā)事件，回調(diào)給父組件。非父子組件兄弟組件之間的數(shù)據(jù)傳遞非父子組件通信，官方推薦使用一個(gè)實(shí)例作為中央事件總線。寫在前面因?yàn)閷?duì)Vue.js很感興趣，而且平時(shí)工作的技術(shù)棧也是Vue.js，這幾個(gè)月花了些時(shí)間研究學(xué)習(xí)了一下Vue.js源碼，并做了總結(jié)與輸出。文章的原地址：https://github.com/answ...

Profeel 2019-08-21 17:11 評(píng)論0 收藏0
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來(lái)說(shuō)組件間的數(shù)據(jù)通信非常重要，那么組件之間如何進(jìn)行數(shù)據(jù)通信的呢？首先我們需要知道在vue中組件之間存在什么樣...

BicycleWarrior 2019-08-26 10:44 評(píng)論0 收藏0
Vue組件基礎(chǔ)與通信

摘要：組件基礎(chǔ)與通信一腳手架簡(jiǎn)介與安裝之前安裝的是模塊，之后安裝的是模塊。如果是三級(jí)組件通信，該如何處理比如父組件與孫子組件通信。和，提供和注入實(shí)現(xiàn)祖先組件和后代組件之間通信。 Vue組件基礎(chǔ)與通信一、vue cli腳手架 ① vue cli 簡(jiǎn)介與安裝 vue cli 3.0之前安裝的是vue-cli模塊，vue cli 3.0之后安裝的是@vue/cli模塊。如果已經(jīng)全局安裝了舊版本的...

I_Am 2019-08-26 10:48 評(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