Vue父子組件方法this.$emit()有時(shí)候不觸發(fā)問題及解決
Vue父子組件方法this.$emit()有時(shí)候不觸發(fā)
問題
當(dāng)Vue使用this.$emit時(shí)，父組件無(wú)法觸發(fā)監(jiān)聽事件
原因
（1）this.$emit(‘MyEmit’);使用了駝峰命名發(fā)
（2）沒用使用this.$nextTick();
（3）還有可能是用了彈窗這一類組件，在調(diào)用this.$emit("MyEmit")前，先關(guān)閉了彈窗，導(dǎo)致事件被銷毀，所以，應(yīng)該在在關(guān)閉彈窗之前先調(diào)emit方法；
解決
this.$nextTick(() => {
this.$emit("myemit")
//或者
this.$emit("my-emit")
});Vue $emit()不觸發(fā)方法的分析
1.事件名稱不全是小寫。事件名稱要求全小寫。
2.不是父子關(guān)系。這里的父子關(guān)系是嚴(yán)格的父子關(guān)系，祖孫關(guān)系也不行。只能一層一層觸發(fā)，這在寫樹形組件時(shí)，很容易掉坑里。
3.父組件沒有用 .sync修飾符
.sync是vue中用于實(shí)現(xiàn)簡(jiǎn)單的“雙向綁定”的語(yǔ)法糖，在平時(shí)的開發(fā)中是非常使用的。
vue的prop是單向下行綁定：
父級(jí)的prop的更新會(huì)向下流動(dòng)到子組件中，但是反過來(lái)不行。
可是有些情況，我們需要對(duì)prop進(jìn)行“雙向綁定”。
這個(gè)時(shí)候，就可以用.sync來(lái)解決。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vite+vue3項(xiàng)目中使用SVG方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue.js每天必學(xué)之組件與組件間的通信,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
Vue2 使用 Echarts 創(chuàng)建圖表實(shí)例代碼
本篇文章主要介紹了Vue2 使用 Echarts 創(chuàng)建圖表實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
vue?點(diǎn)擊按鈕?路由跳轉(zhuǎn)指定頁(yè)面的實(shí)現(xiàn)方式
這篇文章主要介紹了vue?點(diǎn)擊按鈕?路由跳轉(zhuǎn)指定頁(yè)面的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue使用pages構(gòu)建多頁(yè)應(yīng)用的實(shí)現(xiàn)步驟
在大部分實(shí)際場(chǎng)景中,我們都可以構(gòu)建單頁(yè)應(yīng)用來(lái)進(jìn)行項(xiàng)目的開發(fā)和迭代,然而對(duì)于項(xiàng)目復(fù)雜度過高或者頁(yè)面模塊之間差異化較大的項(xiàng)目,我們可以選擇構(gòu)建多頁(yè)應(yīng)用來(lái)實(shí)現(xiàn),那么什么是多頁(yè)應(yīng)用,本文就給大家介紹了Vue使用pages構(gòu)建多頁(yè)應(yīng)用的實(shí)現(xiàn)步驟2024-12-12
Vue中的computed與watch底層實(shí)現(xiàn)原理最佳實(shí)踐
本文介紹Vue中computed和watch的底層實(shí)現(xiàn)原理,對(duì)比了核心概念、設(shè)計(jì)差異以及使用場(chǎng)景,通過分析computed的初始化、依賴追蹤、緩存機(jī)制,以及watch的初始化、深度監(jiān)聽、異步更新,本文提供了一個(gè)全面的對(duì)比總結(jié),并給出了性能優(yōu)化和最佳實(shí)踐建議,感興趣的朋友一起看看吧2026-01-01
這篇文章主要介紹了Vue3中使用pinia,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
vue單向以及雙向數(shù)據(jù)綁定方式(v-bind和v-model的使用)
這篇文章主要介紹了vue單向以及雙向數(shù)據(jù)綁定方式(v-bind和v-model的使用)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue框架下部署上線后刷新報(bào)404問題的解決方案(推薦)
這篇文章主要介紹了vue框架下部署上線后刷新報(bào)404問題解決方案,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
這篇文章主要介紹了TypeScript中集成Tween.js踩坑記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01