Vue中使用event的坑及解決event is not defined
更新時(shí)間：2024年03月24日 09:24:07 作者：前端小怪獸zmy
這篇文章主要介紹了Vue中使用event的坑及解決event is not defined,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue使用event坑event is not defined
情況一：
mounted() {
window.addEventListener('click', this.measureDistance) //調(diào)用的時(shí)候沒有括號(hào)
},
methods:{
measureDistance(event) {
console.log(event)
}
}情況二：
//template部分：
<img src="./img/distance.png"class="operationIcon" /><span class="operationText"
@click="test($event)">測距</span> //有$符號(hào)
//js部分
methods: {
test(event) {
console.log(event)
}
}vue使用eventBus遇到數(shù)據(jù)不更新
問題關(guān)鍵點(diǎn)
在于路由跳轉(zhuǎn)時(shí)，組件之間的執(zhí)行順序?qū)е率录壎ɑ蛘呤录{(diào)用沒有生效。
執(zhí)行順序
新組件beforeCreate——新組件created——新組件beforeMount——舊組件beforeDestroy——舊組件destroyed——新組件mounted。
咱們在舊組件的事件中使用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)文章
這篇文章主要介紹了vue2.x引入threejs,如果在開發(fā)過程中出現(xiàn)threejs生成的canvas出現(xiàn)外邊框,只需要用css樣式修改，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-09-09
插槽（slot）可以說在一個(gè)?Vue?項(xiàng)目里面處處都有它的身影，比如我們使用一些UI?組件庫的時(shí)候，我們通?？梢允褂貌宀蹃碜远x我們的內(nèi)容，今天通過本文給大家介紹vue3插槽slot的相關(guān)知識(shí)，感興趣的朋友一起看看吧2022-08-08
這篇文章主要介紹了vue 驗(yàn)證兩次輸入的密碼是否一致的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
這篇文章主要介紹了Vue 子組件更新props中的屬性值問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue ref如何獲取子組件屬性值。具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要為大家介紹了JointJS流程圖的繪制方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要為大家介紹了JS圖片懶加載庫VueLazyLoad示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
本文重點(diǎn)介紹axios如何配合vue搭建項(xiàng)目框架,文章給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-07-07
Vue響應(yīng)式原理與虛擬DOM實(shí)現(xiàn)步驟詳細(xì)講解
在Vue中最重要、最核心的概念之一就是響應(yīng)式系統(tǒng)。這個(gè)系統(tǒng)使得Vue能夠自動(dòng)追蹤數(shù)據(jù)變化，并在數(shù)據(jù)發(fā)生變化時(shí)自動(dòng)更新相關(guān)的DOM元素。本文將會(huì)探討Vue響應(yīng)式系統(tǒng)的實(shí)現(xiàn)原理及其底層實(shí)現(xiàn)2023-03-03
vue實(shí)現(xiàn)移動(dòng)端彈出鍵盤功能(防止頁面fixed布局錯(cuò)亂)
這篇文章主要介紹了vue?解決移動(dòng)端彈出鍵盤導(dǎo)致頁面fixed布局錯(cuò)亂的問題,通過實(shí)例代碼給大家分享解決方案，對vue?移動(dòng)端彈出鍵盤相關(guān)知識(shí)感興趣的朋友一起看看吧2022-04-04