vue父子組件通信方式有哪些?我們一起了解一下吧!
vue父子組件通信方式有Prop,$emit、$attrs 、 $listeners、provide 、 inject ,sync語法糖和一些其他方式。以下是常用通信方式的具體介紹。
1、prop
這個(gè)在我們?nèi)粘i_發(fā)當(dāng)中用到的非常多。簡(jiǎn)單來說,我們可以通過 Prop 向子組件傳遞數(shù)據(jù)。用一個(gè)形象的比喻來說,父子組件之間的數(shù)據(jù)傳遞相當(dāng)于自上而下的下水管子,只能從上往下流,不能逆流。這也正是 Vue 的設(shè)計(jì)理念之單向數(shù)據(jù)流。而 Prop 正是管道與管道之間的一個(gè)銜接口,這樣水(數(shù)據(jù))才能往下流。
2、$emit
官方說法是觸發(fā)當(dāng)前實(shí)例上的事件。附加參數(shù)都會(huì)傳給監(jiān)聽器回調(diào)。
大致邏輯如下:當(dāng)我在頁面上點(diǎn)擊按鈕時(shí),觸發(fā)了組件 MyButton 上的監(jiān)聽事件 greet,并且把參數(shù)傳給了回調(diào)函數(shù) sayHi 。說白了,當(dāng)我們從子組件 Emit(派發(fā)) 一個(gè)事件之前,其內(nèi)部都提前在事件隊(duì)列中 On(監(jiān)聽)了這個(gè)事件及其監(jiān)聽回調(diào)。
3、.sync 修飾符
在 vue@1.x 的時(shí)候曾作為雙向綁定功能存在,即子組件可以修改父組件中的值。因?yàn)樗`反了單向數(shù)據(jù)流的設(shè)計(jì)理念,所以在 vue@2.0 的時(shí)候被干掉了。但是在 vue@2.3.0+ 以上版本又重新引入了這個(gè) .sync 修飾符。但是這次它只是作為一個(gè)編譯時(shí)的語法糖存在。它會(huì)被擴(kuò)展為一個(gè)自動(dòng)更新父組件屬性的 v-on 監(jiān)聽器。說白了就是讓我們手動(dòng)進(jìn)行更新父組件中的值了,從而使數(shù)據(jù)改動(dòng)來源更加的明顯。
4、$attrs
包含了父作用域中不作為 prop 被識(shí)別 (且獲取) 的特性綁定 (class 和 style 除外)。當(dāng)一個(gè)組件沒有聲明任何 prop 時(shí),這里會(huì)包含所有父作用域的綁定 (class 和 style 除外),并且可以通過 v-bind="$attrs" 傳入內(nèi)部組件——在創(chuàng)建高級(jí)別的組件時(shí)非常有用。
5、$listeners
包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽器。它可以通過 v-on="$listeners" 傳入內(nèi)部組件——在創(chuàng)建更高層次的組件時(shí)非常有用。
6、EventBus
思路就是聲明一個(gè)全局Vue實(shí)例變量EventBus,把所有的通信數(shù)據(jù),事件監(jiān)聽都存儲(chǔ)到這個(gè)變量上,這樣就到達(dá)在組件間實(shí)現(xiàn)數(shù)據(jù)共享,有點(diǎn)類似Vuex。
關(guān)于vue父子組件通信方式,我們就分享到這啦!
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com