Vue中使用event的坑及解決event is not defined
更新時間：2024年03月24日 09:24:07 作者：前端小怪獸zmy
這篇文章主要介紹了Vue中使用event的坑及解決event is not defined,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue使用event坑event is not defined
情況一：
mounted() {
window.addEventListener('click', this.measureDistance) //調(diào)用的時候沒有括號
},
methods:{
measureDistance(event) {
console.log(event)
}
}情況二：
//template部分：
<img src="./img/distance.png"class="operationIcon" /><span class="operationText"
@click="test($event)">測距</span> //有$符號
//js部分
methods: {
test(event) {
console.log(event)
}
}vue使用eventBus遇到數(shù)據(jù)不更新
問題關鍵點
在于路由跳轉(zhuǎn)時，組件之間的執(zhí)行順序?qū)е率录壎ɑ蛘呤录{(diào)用沒有生效。
執(zhí)行順序
新組件beforeCreate——新組件created——新組件beforeMount——舊組件beforeDestroy——舊組件destroyed——新組件mounted。
咱們在舊組件的事件中使用emit觸發(fā)函數(shù)調(diào)用，這時新組件的created鉤子進行on綁定函數(shù)已經(jīng)晚了。
解決方案
新組件綁定事件放在created中。舊組件觸發(fā)事件放在destroyed函數(shù)中。
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了vue使用echarts圖表的詳細方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
這篇文章主要介紹了Vue駝峰與短橫線分割命名中的注意事項，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-02-02
本篇文章主要介紹了Vue學習筆記進階篇之多元素及多組件過渡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了vue中如何實現(xiàn)pdf文件預覽的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
在?Vue?3?中,動態(tài)組件是一種允許在運行時動態(tài)切換組件的機制,本文主要為大家詳細介紹了動態(tài)組件在Vue3中的具體使用,感興趣的小伙伴可以了解下2024-01-01
詳解Vue3 Composition API中的提取和重用邏輯
這篇文章主要介紹了Vue3 Composition API中的提取和重用邏輯，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
KKFileView結合vue多格式文件在線預覽功能實現(xiàn)
kkFileView是git的開源在線文件預覽項目，這篇文章主要介紹了KKFileView結合vue多格式文件在線預覽功能，本文給大家介紹的非常詳細,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了vue后臺管理之動態(tài)加載路由的方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
vue3 攜帶參數(shù)跳轉(zhuǎn)|router傳參方式
這篇文章主要介紹了vue3 攜帶參數(shù)跳轉(zhuǎn)|router傳參方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
uniapp中使用u-loadmore,loadText內(nèi)容不隨status改變刷新方式
這篇文章主要介紹了uniapp中使用u-loadmore,loadText內(nèi)容不隨status改變刷新方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05