欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue $emit()不能觸發(fā)父組件方法的原因及解決

 更新時(shí)間：2020年07月28日 09:59:57   作者：小小米粒吖  
這篇文章主要介紹了Vue $emit()不能觸發(fā)父組件方法的原因及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

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

改為this.emit(‘onincr')

以上這篇Vue $emit()不能觸發(fā)父組件方法的原因及解決就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論