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