在首頁開發中，右下角有一個返回頂部的小箭頭，將它單獨封裝成一個BackTop元件，但是它何時出現需要依賴於首頁的滑動，即另外一個Scroll元件。如果直接在BackTop元件裡面監聽，則需要通過this.$emit將事件發射到Home元件中，又在Home中監聽自定義事件，比較複雜。因此，我們直接在Home中對BackTop元件進行監聽，使用 .native

官網對於native的解釋為:

.native：監聽元件根元素的原生事件

程式碼如下：

在Home.vue中對back-top元件進行點選事件監聽：

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節點

2.在vue元件中,this.$refs.ref獲取的是元件的例項，元件中的data可以直接this.$refs.ref.key獲取資料

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。