快捷導(dǎo)航

Vue中使用event的坑及解決event is not defined

更新時(shí)間：2024年03月24日 09:24:07 作者：前端小怪獸zmy

這篇文章主要介紹了Vue中使用event的坑及解決event is not defined,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue使用event坑event is not defined

情況一：

 mounted() {
    window.addEventListener('click', this.measureDistance) //調(diào)用的時(shí)候沒(méi)有括號(hào)
  },
 
methods:{
  measureDistance(event) {
      console.log(event)
  }
}

情況二：

//template部分：
<img src="./img/distance.png"class="operationIcon" /><span class="operationText"
 @click="test($event)">測(cè)距</span>  //有$符號(hào)
 
 
//js部分
methods: {
    test(event) { 
         console.log(event) 
  }
}

vue使用eventBus遇到數(shù)據(jù)不更新

問(wèn)題關(guān)鍵點(diǎn)

在于路由跳轉(zhuǎn)時(shí)，組件之間的執(zhí)行順序?qū)е率录壎ɑ蛘呤录{(diào)用沒(méi)有生效。

執(zhí)行順序

新組件beforeCreate——新組件created——新組件beforeMount——舊組件beforeDestroy——舊組件destroyed——新組件mounted。

咱們?cè)谂f組件的事件中使用emit觸發(fā)函數(shù)調(diào)用，這時(shí)新組件的created鉤子進(jìn)行on綁定函數(shù)已經(jīng)晚了。

解決方案

新組件綁定事件放在created中。舊組件觸發(fā)事件放在destroyed函數(shù)中。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue使用echarts圖表的詳細(xì)方法
這篇文章主要為大家詳細(xì)介紹了vue使用echarts圖表的詳細(xì)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-10-10
Vue駝峰與短橫線分割命名中有哪些坑
這篇文章主要介紹了Vue駝峰與短橫線分割命名中的注意事項(xiàng)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧
2023-02-02
Vue學(xué)習(xí)筆記進(jìn)階篇之多元素及多組件過(guò)渡
本篇文章主要介紹了Vue學(xué)習(xí)筆記進(jìn)階篇之多元素及多組件過(guò)渡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
vue中如何實(shí)現(xiàn)pdf文件預(yù)覽的方法
這篇文章主要介紹了vue中如何實(shí)現(xiàn)pdf文件預(yù)覽的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-07-07
詳解Vue3中如何使用動(dòng)態(tài)組件
在?Vue?3?中,動(dòng)態(tài)組件是一種允許在運(yùn)行時(shí)動(dòng)態(tài)切換組件的機(jī)制,本文主要為大家詳細(xì)介紹了動(dòng)態(tài)組件在Vue3中的具體使用,感興趣的小伙伴可以了解下
2024-01-01
詳解Vue3 Composition API中的提取和重用邏輯
這篇文章主要介紹了Vue3 Composition API中的提取和重用邏輯，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-04-04
KKFileView結(jié)合vue多格式文件在線預(yù)覽功能實(shí)現(xiàn)
kkFileView是git的開(kāi)源在線文件預(yù)覽項(xiàng)目，這篇文章主要介紹了KKFileView結(jié)合vue多格式文件在線預(yù)覽功能，本文給大家介紹的非常詳細(xì),需要的朋友可以參考下
2024-02-02
vue后臺(tái)管理之動(dòng)態(tài)加載路由的方法
這篇文章主要介紹了vue后臺(tái)管理之動(dòng)態(tài)加載路由的方法,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
vue3 攜帶參數(shù)跳轉(zhuǎn)|router傳參方式
這篇文章主要介紹了vue3 攜帶參數(shù)跳轉(zhuǎn)|router傳參方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
uniapp中使用u-loadmore,loadText內(nèi)容不隨status改變刷新方式
這篇文章主要介紹了uniapp中使用u-loadmore,loadText內(nèi)容不隨status改變刷新方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-05-05