溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下Vue實現(xiàn)監(jiān)聽組件原生事件的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討方法吧！
在首頁開發(fā)中，右下角有一個返回頂部的小箭頭，將它單獨封裝成一個BackTop組件，但是它何時出現(xiàn)需要依賴于首頁的滑動，即另外一個Scroll組件。如果直接在BackTop組件里面監(jiān)聽，則需要通過this.$emit將事件發(fā)射到Home組件中，又在Home中監(jiān)聽自定義事件，比較復(fù)雜。因此，我們直接在Home中對BackTop組件進行監(jiān)聽，使用 .native
官網(wǎng)對于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結(jié)構(gòu)中，在元素上添加ref屬性，this.$refs.ref獲取的是具有這個ref屬性的dom節(jié)點
2.在vue組件中,this.$refs.ref獲取的是組件的實例，組件中的data可以直接this.$refs.ref.key獲取數(shù)據(jù)
看完了這篇文章，相信你對Vue實現(xiàn)監(jiān)聽組件原生事件的方法有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
