溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
文章舉例說明一下在 vue 中如何更好的監聽瀏覽器事件。原文介紹了一種新增 vue 實例的方法，單獨監聽事件。這樣代碼書寫較為簡練，容易管理。
當監聽如下事件的傳統做法是：
通常需要書寫很多代碼：
created () {
this.$el.addEventListener('click', this.someMethod)
},
destroyed () {
this.$el.removeEventListener('click', () => this.someMethod)
}
更好的方式是使用新的 Vue 實例
import Vue from 'vue'
const WindowInstanceMap = new Vue({
data() {
return {
scrollY: 0
}
},
created() {
window.addEventListener('scroll', e => {
this.scrollY = window.scrollY
})
},
})
export default WindowInstanceMap
然后在項目中使用：
// AppNav.vue
import WindowInstanceMap from './WindowInstanceMap.js'
export default {
computed: {
scrollY () { return WindowInstanceMap.scrollY },
isCollapsed () {
return this.scrollY < 100
}
}
}
這樣做的好處是：
最后看看效果：
總結
以上所述是小編給大家介紹的使用 vue 實例更好的監聽事件及vue實例的方法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
