Vue $emit()不能觸發(fā)父組件方法的原因及解決
$emit傳入的事件名稱(chēng)只能使用小寫(xiě)，不能使用大寫(xiě)的駝峰規(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ā)一直不生效，檢查了很多遍的代碼都沒(méi)看出什么問(wèn)題，代碼如下：
<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)過(guò)無(wú)數(shù)的驗(yàn)證，終于找到了解決辦法：
保證待傳遞的事件名稱(chēng)為純小寫(xiě)。不可以使用駝峰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)文章
vscode中Vue別名路徑提示的實(shí)現(xiàn)
這篇文章主要介紹了vscode中Vue別名路徑提示的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
vue項(xiàng)目網(wǎng)頁(yè)自適應(yīng)等比例放大縮小實(shí)例代碼
等比例縮放可以在不同的分辨率下都能夠一屏展示,不會(huì)有滾動(dòng)條的問(wèn)題,也不會(huì)有適配問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目網(wǎng)頁(yè)自適應(yīng)等比例放大縮小的相關(guān)資料,需要的朋友可以參考下2022-11-11
uni-app是一款基于Vue.js的跨平臺(tái)開(kāi)發(fā)框架，它借助了 Vue.js 的語(yǔ)法和組件化開(kāi)發(fā)思想，本文將詳細(xì)介紹 uni-app 的全局配置、靜態(tài)資源管理、路由管理以及數(shù)據(jù)通信和狀態(tài)管理的進(jìn)階使用技巧,需要的朋友可以參考下2023-06-06
在Vue中,有兩種常用的CSS選擇器,用于修改組件樣式：scoped?和?/deep/（或?::v-deep）,它們都是為了實(shí)現(xiàn)樣式的作用域,本文小編就來(lái)分別給大家介紹一下這兩種選擇器的原理,需要的朋友可以參考下2023-08-08
Vue項(xiàng)目build后,圖片加載不出來(lái)的解決
這篇文章主要介紹了Vue項(xiàng)目build后,圖片加載不出來(lái)的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
vue如何實(shí)現(xiàn)路由跳轉(zhuǎn)到外部鏈接界面
這篇文章主要介紹了vue如何實(shí)現(xiàn)路由跳轉(zhuǎn)到外部鏈接界面，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2022-10-10
vue打包生成的文件的js文件過(guò)大的優(yōu)化方式
這篇文章主要介紹了vue打包生成的文件的js文件過(guò)大的優(yōu)化方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue.prototype全局變量的實(shí)現(xiàn)示例
在Vue中可以使用Vue.prototype向Vue的全局作用域添加屬性或方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-06-06
詳解使用Vue Router導(dǎo)航鉤子與Vuex來(lái)實(shí)現(xiàn)后退狀態(tài)保存
本篇文章主要介紹了詳解使用Vue Router導(dǎo)航鉤子與Vuex來(lái)實(shí)現(xiàn)后退狀態(tài)保存，具有一定的參考價(jià)值，有興趣的可以了解一下2017-09-09
簡(jiǎn)單說(shuō)說(shuō)如何使用vue-router插件的方法
這篇文章主要介紹了如何使用vue-router插件的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04