Vue父子組件方法this.$emit()有時候不觸發(fā)問題及解決
更新時間：2024年05月23日 16:34:26 作者：一個敲代碼不禿頭的俗人
這篇文章主要介紹了Vue父子組件方法this.$emit()有時候不觸發(fā)問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
Vue父子組件方法this.$emit()有時候不觸發(fā)
問題
當Vue使用this.$emit時，父組件無法觸發(fā)監(jiān)聽事件
原因
（1）this.$emit(‘MyEmit’);使用了駝峰命名發(fā)
（2）沒用使用this.$nextTick();
（3）還有可能是用了彈窗這一類組件，在調(diào)用this.$emit("MyEmit")前，先關(guān)閉了彈窗，導致事件被銷毀，所以，應該在在關(guān)閉彈窗之前先調(diào)emit方法；
解決
this.$nextTick(() => {
this.$emit("myemit")
//或者
this.$emit("my-emit")
});Vue $emit()不觸發(fā)方法的分析
1.事件名稱不全是小寫。事件名稱要求全小寫。
2.不是父子關(guān)系。這里的父子關(guān)系是嚴格的父子關(guān)系，祖孫關(guān)系也不行。只能一層一層觸發(fā)，這在寫樹形組件時，很容易掉坑里。
3.父組件沒有用 .sync修飾符
.sync是vue中用于實現(xiàn)簡單的“雙向綁定”的語法糖，在平時的開發(fā)中是非常使用的。
vue的prop是單向下行綁定：
父級的prop的更新會向下流動到子組件中，但是反過來不行。
可是有些情況，我們需要對prop進行“雙向綁定”。
這個時候，就可以用.sync來解決。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue-quill-editor富文本編輯器超詳細入門使用步驟
vue中很多項目都需要用到富文本編輯器,在使用了ueditor和tinymce后,發(fā)現(xiàn)并不理想,所以果斷使用vue-quill-editor來實現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue-quill-editor富文本編輯器入門使用步驟的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue組件中添加@click失效問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了如何解決vue2.0下IE瀏覽器白屏問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
在Vue中,KeepAlive組件是一種特殊的組件,用于緩存已經(jīng)渲染過的組件實例,本文主要為大家詳細介紹了KeepAlive組件的用法,需要的小伙伴可以參考下2023-09-09
這篇文章主要介紹了vue導入新工程?“node_modules依賴”問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
在實際應用場景中,假如有一個下載或者導出請求,數(shù)據(jù)量非常大的情況下,接口響應的會很慢,這時候我我們想中斷請求,該怎么做呢？本文給大家介紹了axios請求中斷的幾種方法,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了在?Vue?中控制表單輸入方法詳解的相關(guān)資料,需要的朋友可以參考下2023-04-04
DeepSeek?助力?Vue?開發(fā)絲滑的表單驗證Form?Validation功能
文章介紹了如何使用Vue3的組合式API創(chuàng)建一個表單驗證組件,并提供了詳細的代碼示例,組件支持雙向綁定、自定義驗證規(guī)則、樣式和布局等功能,還涵蓋了組件的調(diào)用示例、路由配置和頁面展示入口2025-02-02
Vue常用API、高級API的相關(guān)總結(jié)
這篇文章主要介紹了Vue常用API、高級API的相關(guān)總結(jié)，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-02-02
這篇文章主要介紹了vue如何給頁面增加url前綴問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12