Vue $emit()不能觸發(fā)父組件方法的原因及解決
更新時間：2020年07月28日 09:59:57 作者：小小米粒吖
這篇文章主要介紹了Vue $emit()不能觸發(fā)父組件方法的原因及解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
$emit傳入的事件名稱只能使用小寫，不能使用大寫的駝峰規(guī)則命名
如果修改后還是不行的話，就改用：
this.$parent.Event (Event為父組件中的自定義方法)
補充知識：Vue.js 使用 $emit 觸發(fā)事件填坑
vue的組件內(nèi)觸發(fā)外部事件不起作用
vue的組件內(nèi)觸發(fā)自定義事件（發(fā)外部事件）不起作用
今天學習vue的自定義組件功能，在組件內(nèi)部觸發(fā)一個事件，在使用組件的地方使用v-on綁定這個事件，然而觸發(fā)一直不生效，檢查了很多遍的代碼都沒看出什么問題，代碼如下：
<div id="app">
<button v-on:click="IncrHandle">增加</button>
<input v-model="total" placeholder="請輸入內(nèi)容" />
<child v-bind:count="total" v-on:onIncr="IncrHandle"></child>
</div>
Vue.component("child",{
props:['count'],
template:"<button v-on:click='incr'>增加{{count}}</button>",
data: function(){
return {
count: 0
}
},
methods:{
incr: function(){
this.$emit('onIncr')
this.count += 1
}
}
})
new Vue({
el:"#app",
data:{
total: 0
},
methods:{
IncrHandle:function(){
this.total += 1
total("增加1")
},
DncrHandle:function(){
this.total -= 1
}
}
})
經(jīng)過無數(shù)的驗證，終于找到了解決辦法：
保證待傳遞的事件名稱為純小寫。不可以使用駝峰j格式。
即：
將v-on:onIncr改為v-on:onincr，將this.emit(′onIncr′)改為this.emit('onIncr')改為this.emit( ′ onIncr ′ )
改為this.emit(‘onincr')
以上這篇Vue $emit()不能觸發(fā)父組件方法的原因及解決就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue把頁面轉(zhuǎn)換成圖片導出方式(html2canvas導出不全問題)
這篇文章主要介紹了vue把頁面轉(zhuǎn)換成圖片導出方式(html2canvas導出不全問題),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要和大家詳細介紹一下Vue中computed和watch的使用與區(qū)別，文中通過示例為大家進行了詳細講解，對Vue感興趣的同學，可以學習一下2022-11-11
這篇文章主要介紹了vue中vue-cli項目報錯sockjs.js報錯問題，具有很好的參考價值，希望對大家有所幫助。2022-12-12
這篇文章主要介紹了詳解基于vue的移動web app頁面緩存解決方案，非常具有實用價值，需要的朋友可以參考下2017-08-08
這篇文章主要給大家介紹了關于vue3中refs用法舉例的相關資料,Vue.js中的$refs是一個對象,它持有已注冊過ref特性的所有組件和元素,需要的朋友可以參考下2023-08-08
Vue?ELement?Table技巧表格業(yè)務需求實戰(zhàn)示例
這篇文章主要介紹了Vue?ELement?Table技巧表格業(yè)務需求實戰(zhàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
淺談angular4.0中路由傳遞參數(shù)、獲取參數(shù)最nice的寫法
下面小編就為大家分享一篇淺談angular4.0中路由傳遞參數(shù)、獲取參數(shù)最nice的寫法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
本篇文章主要介紹了vue2里面ref的具體使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了vue中的v-if和v-show的區(qū)別詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
這篇文章主要介紹了vue中input的v-model清空操作，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09