簡(jiǎn)單聊聊vue2.x的$attrs和$listeners
$attrs
$attrs 用于多層次組件傳遞參數(shù)(組件標(biāo)簽的attribute,class和style除外),爺爺輩組件向?qū)O子輩組件傳遞參數(shù)(注:參數(shù)不能被父輩prop識(shí)別,一旦被父輩prop識(shí)別且獲取,則孫子輩組件不能獲取到該參數(shù))
寫(xiě)法如下:(注:v-bind不能用簡(jiǎn)寫(xiě) :)
<grand-son v-bind="$attrs" />
下面舉個(gè)栗子:
爺爺(GrandFather)向父親(Father)傳遞一個(gè) msg1
向?qū)O子(GrandSon)傳遞一個(gè) msg2,孫子會(huì)一并接收 msg1(然而被父親接走了,所以孫子收不到 msg1)
<!-- GrandFather.vue --> <template> <div> GrandFather: <father :msg1="msg1" :msg2="msg2" /> </div> </template> <script> import Father from './Father.vue' export default { components: { Father }, data() { return { msg1: 'msg1', msg2: 'msg2' } } } </script>
<!-- Father.vue --> <template> <div> Father: {{ msg1 }} <grand-son v-bind="$attrs" /> </div> </template> <script> import GrandSon from './GrandSon.vue' export default { components: { GrandSon }, props: ['msg1'] } </script>
<!-- GrandSon.vue --> <template> <div>GrandSon: {{ msg1 }}{{ msg2 }}</div> </template> <script> export default { props: ['msg1', 'msg2'] } </script>
界面現(xiàn)實(shí)結(jié)果:
GrandFather:
Father: msg1
GrandSon: msg2
$listeners
$listeners 用于多層次組件傳遞事件監(jiān)聽(tīng)器,爺爺輩組件向父輩、孫子輩、曾孫子輩……組件傳遞事件(與 $attrs 不同,不存在半路被攔截的情況)
寫(xiě)法如下:(注:v-on 不能用簡(jiǎn)寫(xiě) @,雖然不報(bào)錯(cuò),但是也不生效)
<grand-son v-on="$listeners" />
下面繼續(xù)使用 爺爺-> 父親 -> 孫子 的栗子:
爺爺(GrandFather)給父親(Father)綁定一個(gè) click 事件
父親通過(guò)點(diǎn)擊 div 觸發(fā) click 事件,同時(shí)向?qū)O子(GrandSon)傳遞 $listeners
<!-- GrandFather.vue --> <template> <div> GrandFather: <father :msg1="msg1" :msg2="msg2" @click="handleClick" /> </div> </template> <script> import Father from './Father.vue' export default { components: { Father }, data() { return { msg1: 'msg1', msg2: 'msg2' } }, methods: { handleClick() { console.log('trriger click') } } } </script>
<!-- Father.vue --> <template> <div> <div @click="handleFatherClick">Father: {{ msg1 }}</div> <grand-son v-bind="$attrs" v-on="$listeners" /> </div> </template> <script> import GrandSon from './GrandSon.vue' export default { components: { GrandSon }, props: ['msg1'], methods: { handleFatherClick() { console.log('father click') this.$emit('click') } } } </script>
<!-- GrandSon.vue --> <template> <div @click="handleSonClick">GrandSon: {{ msg1 }}{{ msg2 }}</div> </template> <script> export default { props: ['msg1', 'msg2'], methods: { handleSonClick() { console.log('grandson click') this.$emit('click') } } } </script>
界面:
GrandFather:
Father: msg1
GrandSon: msg2
點(diǎn)擊 Father: msg1,控制臺(tái)顯示:
father click
trriger click
點(diǎn)擊 GrandSon: msg2,控制臺(tái)顯示:
grandson click
trriger click
總結(jié)
到此這篇關(guān)于vue2.x的$attrs和$listeners的文章就介紹到這了,更多相關(guān)vue2.x $attrs和$listeners內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
解決VUE項(xiàng)目localhost端口服務(wù)器拒絕連接,只能用127.0.0.1的問(wèn)題
這篇文章主要介紹了解決VUE項(xiàng)目localhost端口服務(wù)器拒絕連接,只能用127.0.0.1的問(wèn)題2020-08-08解決element DateTimePicker+vue彈出框只顯示小時(shí)
這篇文章主要介紹了解決element DateTimePicker+vue彈出框只顯示小時(shí),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03前端vue+elementUI如何實(shí)現(xiàn)記住密碼功能
這篇文章主要給大家介紹了關(guān)于vue+elementUI如何實(shí)現(xiàn)記住密碼功能的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09vue項(xiàng)目實(shí)現(xiàn)下載zip壓縮包
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)下載zip壓縮包方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03Vue中如何動(dòng)態(tài)顯示表格內(nèi)容
這篇文章主要介紹了Vue中如何動(dòng)態(tài)顯示表格內(nèi)容問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10Vue狀態(tài)機(jī)的開(kāi)啟與停止操作詳細(xì)講解
Vuex是專(zhuān)門(mén)為Vuejs應(yīng)用程序設(shè)計(jì)的狀態(tài)管理工具,這篇文章主要給大家介紹了關(guān)于Vuex狀態(tài)機(jī)快速了解與實(shí)例應(yīng)用的相關(guān)資料,需要的朋友可以參考下2023-01-01使用this.$router.go(-1)遇到的一些問(wèn)題及解決
這篇文章主要介紹了使用this.$router.go(-1)遇到的一些問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12