Vue中如何監聽元件的原生事件

2022-08-11 13:39:15 字數 1006 閱讀 1085

在首頁開發中,右下角有乙個返回頂部的小箭頭,將它單獨封裝成乙個backtop元件,但是它何時出現需要依賴於首頁的滑動,即另外乙個scroll元件。如果直接在backtop元件裡面監聽,則需要通過this.$emit將事件發射到home元件中,又在home中監聽自定義事件,比較複雜。因此,我們直接在home中對backtop元件進行監聽,使用.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獲取資料

Vue 給元件繫結原生事件

給元件繫結原生事件的兩種實現方法宣告乙個元件 var child 使用元件並且繫結事件 click handleclick child 事件方法實現 methods 宣告乙個元件 var child 使用元件並且繫結事件 click handleclick child 事件方法實現 methods ...

給元件繫結原生事件

元件上繫結原生事件 1.在父元件繫結事件 click.native handle 2.在vue例項中的methods定義事件函式 body div id root child click.native handleclick child div script vue.component child ...

在元件上繫結原生事件

vue基礎結構 root child div vue.component child var vm newvue script body 在元件上繫結事件時 root handleclick child div vue.component child var vm newvue script bod...