關(guān)于vue2.0的事件發(fā)射和接收，大家都知道$dispatch和$broadcast在vue2.0已經(jīng)被棄用了，取而代之的是更加方便快捷的方式，使用事件中心，組件通過它來互相通信，不管組件在哪一個(gè)層都可以通過實(shí)例化一個(gè)空Vue來實(shí)現(xiàn)。上案例：
這是自己寫的一個(gè)小案例，功能就是點(diǎn)擊子組件的加減按鈕控制父組件的數(shù)量變化。原理就是子組件的加減按鈕點(diǎn)擊時(shí)分發(fā)事件，父組件接收事件。相信html和css的代碼大家都沒問題，這里不贅述，直接說js部分，首先在項(xiàng)目初始化時(shí)先給data添加名為eventHub的空Vue對象，作用是讓任何組件都可以調(diào)用事件發(fā)射和接收的方法。代碼如下：
在點(diǎn)擊加號按鈕時(shí)向父組件派發(fā)事件：
由于我寫的json數(shù)據(jù)是兩層的：
所以兩層循環(huán)把數(shù)據(jù)展示在頁面上，要精確將某個(gè)食物的數(shù)量顯示必須知道第一大類和這一大類下這個(gè)食物的索引值，在這里在html那里先把兩個(gè)索引傳進(jìn)子組件，在分發(fā)事件時(shí)再和數(shù)量一起打包成對象發(fā)射給父組件。
記得子組件要在props里對child，parent進(jìn)行聲明，接著是父組件對發(fā)射過來的countFunc進(jìn)行接收：
到了這個(gè)時(shí)候?qū)⒆咏M件傳過來的countFunc里的obj進(jìn)行console.log()，你會(huì)發(fā)現(xiàn)父組件已經(jīng)接收了一個(gè)對象：Object {count: 1, index: 0, parent: 0}，也就是當(dāng)我點(diǎn)擊一下蘋果的加號按鈕時(shí)傳過來count為1說明數(shù)量為1，parent索引為0說明是第一大類，index為0說明是第一大類下的蘋果，至此已經(jīng)實(shí)現(xiàn)了父子組件之間的事件發(fā)射和接收。
完整代碼如下：
1.父組件:
2.子組件:
總結(jié)
以上所述是小編給大家介紹的Vue2.0父組件與子組件之間的事件發(fā)射與接收，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司網(wǎng)站的支持！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
重慶分公司
重慶分公司
