Vue如何實現(xiàn)監(jiān)聽組件原生事件
在首頁開發(fā)中，右下角有一個返回頂部的小箭頭，將它單獨封裝成一個BackTop組件，但是它何時出現(xiàn)需要依賴于首頁的滑動，即另外一個Scroll組件。如果直接在BackTop組件里面監(jiān)聽，則需要通過this.$emit將事件發(fā)射到Home組件中，又在Home中監(jiān)聽自定義事件，比較復雜。因此，我們直接在Home中對BackTop組件進行監(jiān)聽，使用 .native
官網對于native的解釋為:
.native：監(jiān)聽組件根元素的原生事件
代碼如下：
在Home.vue中對back-top組件進行點擊事件監(jiān)聽：
this.$refs.scroll 得到的是 Scroll 組件，this.$refs.scroll.scroll 得到的是Scroll組件中 data 中定義的 scroll屬性，
better-scroll中有個方法是 scrollTo，
這里順便講解一下 ref 屬性的使用：
ref 被用來給DOM元素或子組件注冊引用信息。引用信息將會注冊在父組件的 $refs對象上。$refs 是所有注冊過的ref的一個集合，
如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件實例。
1.在普通的dom結構中，在元素上添加ref屬性，this.$refs.ref獲取的是具有這個ref屬性的dom節(jié)點
2.在vue組件中,this.$refs.ref獲取的是組件的實例，組件中的data可以直接this.$refs.ref.key獲取數(shù)據(jù)
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Vue+Webpack完美整合富文本編輯器TinyMce的方法
這篇文章主要介紹了Vue+Webpack完美整合富文本編輯器TinyMce的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-11-11
這篇文章主要介紹了Vue.js進行查詢操作的實例詳解的相關資料,需要的朋友可以參考下2017-08-08
vue2結合element-ui實現(xiàn)TreeSelect樹選擇功能
這篇文章主要為大家詳細介紹了vue2如何結合element-ui實現(xiàn)TreeSelect樹選擇功能,文中的示例代碼講解詳細,感興趣的小伙伴可以了解下2024-03-03
vue使用keep-alive無效以及include和exclude用法解讀
這篇文章主要介紹了vue使用keep-alive無效以及include和exclude用法解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
vue使用cesium創(chuàng)建數(shù)據(jù)白模方式
這篇文章主要介紹了vue使用cesium創(chuàng)建數(shù)據(jù)白模方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
今天小編就為大家分享一篇淺談vue引用靜態(tài)資源需要注意的事項，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue3調度器effect的scheduler功能實現(xiàn)詳解
這篇文章主要為大家介紹了vue3調度器effect的scheduler功能實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要介紹了vue中echarts視圖不更新問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了vue3無config文件夾打包后頁面空白問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue路由對象屬性 .meta $route.matched詳解
今天小編就為大家分享一篇Vue路由對象屬性 .meta $route.matched詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11