Vue 之兄弟組件通信

CntChen 發(fā)布于2019-08-23 16:59 / 2923人閱讀

摘要：如何把兄弟組件的內(nèi)容傳給兄弟組件例如把子兄弟組件的說(shuō)的話(huà)傳給兄弟組件并在兄弟組件上顯示思路創(chuàng)建用來(lái)接收和發(fā)送事件組件在被點(diǎn)擊時(shí)發(fā)送事件至組件在時(shí)監(jiān)聽(tīng)事件，當(dāng)事件觸發(fā)時(shí)調(diào)用處理函數(shù)處理函數(shù)把組件發(fā)送過(guò)來(lái)的數(shù)據(jù)在組件內(nèi)展示

如何把兄弟組件 1 的內(nèi)容傳給兄弟組件 2 ？

例如
把子兄弟組件 1 的說(shuō)的話(huà)傳給兄弟組件 2 并在兄弟組件 2 上顯示

思路
創(chuàng)建 eventHub 用來(lái)接收和發(fā)送事件
組件 1 在被點(diǎn)擊時(shí)發(fā)送事件至 eventHub
組件 2 在 created 時(shí)監(jiān)聽(tīng)事件，當(dāng)事件觸發(fā)時(shí)調(diào)用處理函數(shù)
處理函數(shù)把組件 1 發(fā)送過(guò)來(lái)的數(shù)據(jù)在組件 2 內(nèi)展示

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

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

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

相關(guān)文章

Vue組件通信

摘要：使，最主要的的是跨組件通信全局?jǐn)?shù)據(jù)維護(hù)。這兩種法旦發(fā)出事件后，任何組件都是可以接收到的，就近原則，且會(huì)在第次接收到后停冒泡，除返回。并且和也沒(méi)有解決兄弟組件間的通信問(wèn)題。 Vue的組件是其非常重要的系統(tǒng)，組件之間的通信也是開(kāi)發(fā)中不可避免的需求一般來(lái)說(shuō)Vue組件是以下幾種關(guān)系 showImg(https://segmentfault.com/img/bVbrrTY); A組件和B組件、...

philadelphia 2019-08-23 16:58 評(píng)論0 收藏0
vuejs組件通信精髓歸納

摘要：組件的通信和和內(nèi)置的通信手段一般有兩種給元素或組件注冊(cè)引用信息訪問(wèn)父子實(shí)例。有時(shí)候兩個(gè)組件之間需要進(jìn)行通信，但是它們彼此不是父子組件的關(guān)系。詳情可參考參考組件之間種組件通信方式總結(jié)參考參考組件的分類(lèi) 常規(guī)頁(yè)面組件，由 vue-router 產(chǎn)生的每個(gè)頁(yè)面，它本質(zhì)上也是一個(gè)組件（.vue），主要承載當(dāng)前頁(yè)面的 HTML 結(jié)構(gòu)，會(huì)包含數(shù)據(jù)獲取、數(shù)據(jù)整理、數(shù)據(jù)可視化等常規(guī)業(yè)務(wù)。功能性抽...

妤鋒シ 2019-08-23 15:23 評(píng)論0 收藏0
vue中8種組件通信方式, 值得收藏!

摘要：一父組件通過(guò)的方式向子組件傳遞數(shù)據(jù)，而通過(guò)子組件可以向父組件通信。而且只讀，不可被修改，所有修改都會(huì)失效并警告。之前寫(xiě)了一篇關(guān)于vue面試總結(jié)的文章, 有不少網(wǎng)友提出組件之間通信方式還有很多, 這篇文章便是專(zhuān)門(mén)總結(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組件通信全面總結(jié)

摘要：當(dāng)一個(gè)組件沒(méi)有聲明任何時(shí)，這里會(huì)包含所有父作用域的綁定和除外，并且可以通過(guò)傳入內(nèi)部組件在創(chuàng)建高級(jí)別的組件時(shí)非常有用。寫(xiě)在前面組件間的通信是是實(shí)際開(kāi)發(fā)中非常常用的一環(huán)，如何使用對(duì)項(xiàng)目整體設(shè)計(jì)、開(kāi)發(fā)、規(guī)范都有很實(shí)際的的作用，我在項(xiàng)目開(kāi)發(fā)中對(duì)此深有體會(huì)，總結(jié)下vue組件間通信的幾種方式，討論下各自的使用場(chǎng)景文章對(duì)相關(guān)場(chǎng)景預(yù)覽父->子組件間的數(shù)據(jù)傳遞子->父組件間的數(shù)據(jù)傳遞兄弟...

余學(xué)文 2019-08-23 12:16 評(píng)論0 收藏0
【Vue項(xiàng)目總結(jié)】組件通信處理方案

摘要：組件之間的通信是我們?cè)陧?xiàng)目中常常碰到的，而選擇合適的通信方式尤為重要，這里總結(jié)下作者在實(shí)際項(xiàng)目中所運(yùn)用到的通信方案，如有遺漏，請(qǐng)大家見(jiàn)諒。示例效果如下兄弟組件同級(jí)別組件相互間的通信，我們可以使用或著。 Vue組件之間的通信是我們?cè)陧?xiàng)目中常常碰到的，而選擇合適的通信方式尤為重要，這里總結(jié)下作者在實(shí)際項(xiàng)目中所運(yùn)用到的通信方案，如有遺漏，請(qǐng)大家見(jiàn)諒。文章代碼具體見(jiàn)DEMO；文章首發(fā)于imon...

TerryCai 2019-08-23 17:52 評(píng)論0 收藏0