$emit傳入的事件名稱只能使用小寫，不能使用大寫的駝峰規則命名

如果修改后還是不行的話，就改用：

this.$parent.Event (Event為父組件中的自定義方法)

補充知識：Vue.js 使用 $emit 觸發事件填坑

vue的組件內觸發外部事件不起作用

vue的組件內觸發自定義事件（發外部事件）不起作用

今天學習vue的自定義組件功能，在組件內部觸發一個事件，在使用組件的地方使用v-on綁定這個事件，然而觸發一直不生效，檢查了很多遍的代碼都沒看出什么問題，代碼如下：

<div id='app'> <button v-on:click='IncrHandle'>增加</button> <input v-model='total' placeholder='請輸入內容' /> <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格式。

即：

將v-on:onIncr改為v-on:onincr，將this.emit(′onIncr′)改為this.emit(&#x27;onIncr&#x27;)改為this.emit( ′ onIncr ′ )

改為this.emit(‘onincr’)

以上這篇Vue $emit()不能觸發父組件方法的原因及解決就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。