溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Vue $emit()為什么不能觸發(fā)父組件方法

發(fā)布時(shí)間：2020-07-30 10:41:35 來(lái)源：億速云 閱讀：1041 作者：小豬 欄目：開(kāi)發(fā)技術(shù)

小編這次要給大家分享的是Vue $emit()為什么不能觸發(fā)父組件方法，文章內(nèi)容豐富，感興趣的小伙伴可以來(lái)了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

$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(&#x27;onIncr&#x27;)改為this.emit( ′ onIncr ′ )

改為this.emit(‘onincr')

看完這篇關(guān)于Vue $emit()為什么不能觸發(fā)父組件方法的文章，如果覺(jué)得文章內(nèi)容寫(xiě)得不錯(cuò)的話，可以把它分享出去給更多人看到。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手