Vue $emit()不能觸發(fā)父組件方法的原因及解決
$emit傳入的事件名稱只能使用小寫,不能使用大寫的駝峰規(guī)則命名
如果修改后還是不行的話,就改用:
this.$parent.Event (Event為父組件中的自定義方法)
補充知識:Vue.js 使用 $emit 觸發(fā)事件填坑
vue的組件內觸發(fā)外部事件不起作用
vue的組件內觸發(fā)自定義事件(發(fā)外部事件)不起作用
今天學習vue的自定義組件功能,在組件內部觸發(fā)一個事件,在使用組件的地方使用v-on綁定這個事件,然而觸發(fā)一直不生效,檢查了很多遍的代碼都沒看出什么問題,代碼如下:
<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 } }})
經過無數(shù)的驗證,終于找到了解決辦法:
保證待傳遞的事件名稱為純小寫。不可以使用駝峰j格式。
即:
將v-on:onIncr改為v-on:onincr,將this.emit(′onIncr′)改為this.emit('onIncr')改為this.emit( ′ onIncr ′ )
改為this.emit(‘onincr’)
以上這篇Vue $emit()不能觸發(fā)父組件方法的原因及解決就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。
相關文章:
1. ASP中常用的22個FSO文件操作函數(shù)整理2. 無線標記語言(WML)基礎之WMLScript 基礎第1/2頁3. ASP調用WebService轉化成JSON數(shù)據(jù),附json.min.asp4. .Net core 的熱插拔機制的深入探索及卸載問題求救指南5. SharePoint Server 2019新特性介紹6. html清除浮動的6種方法示例7. asp的SQL語句中and和or同時使用的注意事項8. 讀大數(shù)據(jù)量的XML文件的讀取問題9. ASP.NET Core 5.0中的Host.CreateDefaultBuilder執(zhí)行過程解析10. React+umi+typeScript創(chuàng)建項目的過程
