The event name passed in $emit can only be used in lowercase, and cannot be named using uppercase camel rule.
If the modification still doesn't work, use it instead:
this.$ (Event is a custom method in the parent component)
Supplementary knowledge:Use $emit to trigger the event to fill the pit
Triggering external events inside the component of vue does not work
Triggering custom events within the component of vue (sending external events) does not work
Today I learn the custom component function of vue. It triggers an event inside the component and binds this event using v-on where the component is used. However, the trigger has not taken effect. After checking the code many times, I didn't see any problems. The code is as follows:
<div >
<button v-on:click="IncrHandle">Increase</button>
<input v-model="total" placeholder="Please enter content" />
<child v-bind:count="total" v-on:onIncr="IncrHandle"></child>
</div>
("child",{
props:['count'],
template:"<button v-on:click='incr'>Increase{{count}}</button>",
data: function(){
return {
count: 0
}
},
methods:{
incr: function(){
this.$emit('onIncr')
+= 1
}
}
})
new Vue({
el:"#app",
data:{
total: 0
},
methods:{
IncrHandle:function(){
+= 1
total("Add 1")
},
DncrHandle:function(){
-= 1
}
}
})
After countless verifications, the solution was finally found:
Ensure that the event name to be passed is pure lowercase. The camel j format cannot be used.
Right now:
Change v-on:onIncr to v-on:onincr, ('onIncr') to ('onIncr') to (' onIncr' )
Change to ('onincr')
The above reasons and solutions for the Vue $emit() not to trigger the parent component method are all the content I share with you. I hope you can give you a reference and I hope you can support me more.