項(xiàng)目中，我們經(jīng)常會(huì)遇到兄弟組件通信的情況。在大型項(xiàng)目中我們可以通過(guò)引入vuex輕松管理各組件之間通信問(wèn)題，但在一些小型的項(xiàng)目中，我們就沒(méi)有必要去引入vuex。下面簡(jiǎn)單介紹一下使用傳統(tǒng)方法，實(shí)現(xiàn)父子組件通信的方法。

為泗陽(yáng)等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及泗陽(yáng)網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為做網(wǎng)站、成都做網(wǎng)站、泗陽(yáng)網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

簡(jiǎn)單實(shí)例：我們?cè)赼組件中點(diǎn)擊按鈕，將信息傳給b組件，從而使b組件彈出。

主要的思路就是：先子傳父，在父?jìng)髯?/strong>

首先我們?cè)?a.vue 組件中 ，給按鈕botton綁定一個(gè)handleClick事件，事件中我們通過(guò) this.$emit(） 方法去觸發(fā)一個(gè)自定義事件，并傳遞我們的參數(shù)。

示例中我們通過(guò)this.$emit() 去觸發(fā)isLogFn 這個(gè)方法自定義事件，并將log 參數(shù)傳遞出去

a.vue

第二步，我們要在父組件中去監(jiān)聽(tīng)這個(gè)自定義事件，去觸發(fā)對(duì)應(yīng)的方法，并接受a組件傳過(guò)來(lái)的參數(shù)。此時(shí)我們就完成了子組件向父組件傳值的過(guò)程。

示例中， 監(jiān)聽(tīng)isLogFn 去觸發(fā)我們?cè)诟附M件中定義的方法lisLogFn，并拿到傳過(guò)來(lái)的 ‘log' 數(shù)據(jù)。完成子父?jìng)髦怠?/p>

到此，整個(gè)過(guò)程還沒(méi)有結(jié)束，只是完成了一半。接下來(lái)我們要完成父子組件傳值，將a組件的信息在傳給b組件。

在< bPage > 標(biāo)簽中綁定islog 屬性，動(dòng)態(tài)綁定data中的login 字段,在我們通過(guò)lisLogFn 方法拿到 ‘data'之后，我們要判斷 data 傳過(guò)來(lái)的數(shù)據(jù)，根據(jù)判斷結(jié)果去改變data（）中的數(shù)據(jù)，從而將數(shù)據(jù)傳遞給b組件

App.vue

最后，b組件中需要?jiǎng)?chuàng)建props，定義一個(gè)isLog 屬性，這個(gè)屬性就是我們傳過(guò)來(lái)的數(shù)值。然后我們?cè)谟?jì)算屬性中處理這個(gè)數(shù)據(jù)，最終供b組件使用。示例中，我們?cè)趘-show="isLogin" 中用來(lái)控制彈窗是否打開(kāi)。

切記！不能直接使用這個(gè)props，一定要經(jīng)過(guò)computed處理，原因我引用vue官方說(shuō)明

單向數(shù)據(jù)流

b.vue

總結(jié)： 想要實(shí)現(xiàn)兄弟組件傳值，一定要首先熟悉子父，父子之間的傳值。

子父：

1. 子組件中需要以某種方式例如點(diǎn)擊事件的方法來(lái)觸發(fā)一個(gè)自定義事件
2. 將需要傳的值作為$emit的第二個(gè)參數(shù)，該值將作為實(shí)參傳給響應(yīng)自定義事件的方法
3. 在父組件中注冊(cè)子組件并在子組件標(biāo)簽上綁定對(duì)自定義事件的監(jiān)聽(tīng)

父子：

1. 子組件在props中創(chuàng)建一個(gè)屬性，用以接收父組件傳過(guò)來(lái)的值
2. 在子組件標(biāo)簽中添加子組件props中創(chuàng)建的屬性，把需要傳給子組件的值賦給該屬性

文中示例 github 地址：https://github.com/enjoy-pany/vue-emit

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。