簡單聊聊vue2.x的$attrs和$listeners
$attrs
$attrs 用于多層次組件傳遞參數(shù)(組件標簽的attribute,class和style除外),爺爺輩組件向孫子輩組件傳遞參數(shù)(注:參數(shù)不能被父輩prop識別,一旦被父輩prop識別且獲取,則孫子輩組件不能獲取到該參數(shù))
寫法如下:(注:v-bind不能用簡寫 :)
<grand-son v-bind="$attrs" />
下面舉個栗子:
爺爺(GrandFather)向父親(Father)傳遞一個 msg1
向孫子(GrandSon)傳遞一個 msg2,孫子會一并接收 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)實結果:
GrandFather:
Father: msg1
GrandSon: msg2
$listeners
$listeners 用于多層次組件傳遞事件監(jiān)聽器,爺爺輩組件向父輩、孫子輩、曾孫子輩……組件傳遞事件(與 $attrs 不同,不存在半路被攔截的情況)
寫法如下:(注:v-on 不能用簡寫 @,雖然不報錯,但是也不生效)
<grand-son v-on="$listeners" />
下面繼續(xù)使用 爺爺-> 父親 -> 孫子 的栗子:
爺爺(GrandFather)給父親(Father)綁定一個 click 事件
父親通過點擊 div 觸發(fā) click 事件,同時向孫子(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
點擊 Father: msg1,控制臺顯示:
father click
trriger click
點擊 GrandSon: msg2,控制臺顯示:
grandson click
trriger click
總結
到此這篇關于vue2.x的$attrs和$listeners的文章就介紹到這了,更多相關vue2.x $attrs和$listeners內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
解決VUE項目localhost端口服務器拒絕連接,只能用127.0.0.1的問題
這篇文章主要介紹了解決VUE項目localhost端口服務器拒絕連接,只能用127.0.0.1的問題2020-08-08解決element DateTimePicker+vue彈出框只顯示小時
這篇文章主要介紹了解決element DateTimePicker+vue彈出框只顯示小時,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2021-03-03前端vue+elementUI如何實現(xiàn)記住密碼功能
這篇文章主要給大家介紹了關于vue+elementUI如何實現(xiàn)記住密碼功能的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-09-09使用this.$router.go(-1)遇到的一些問題及解決
這篇文章主要介紹了使用this.$router.go(-1)遇到的一些問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12