Vue subcomponent emit has no effect

Why is it that in the template, the child component calls this.$emit, but the parent component cannot trigger the method?
I debugger saw that the event was registered in events, but it didn"t trigger why

https://jsfiddle.net/BiggerKa...

Click on me, there is no alert effect

Jun.06,2022

event name
unlike components and prop, there is no automatic case conversion for event names. Instead, the name of the triggered event needs to exactly match the name used to listen for the event. For example, if an event with the name camelCase is triggered:

this.$emit ('myEvent')
, listening to the kebab-case version of this name will have no effect:

< my-component v my-component my-component
unlike components and prop, the event name is not used as a JavaScript variable or attribute name, so there is no reason to use camelCase or PascalCase. And the v-on event listener is automatically converted to all lowercase in the DOM template (because the HTML is case-insensitive), so the v-on:myEvent will become a v-on:myEvent-making it impossible for the myEvent to be heard.

therefore, we recommend that you always use the event name of kebab-case.


listeners that handleTip needs to display in the parent component, < child @ handleTip= "handleTip" > < / child >


event names are not allowed to be humped, which can not be seen in fiddle. Vue will issue a warning in the browser to interrupt execution. The template and triggered method names can be changed to lowercase.

</child-com>

// script
methods: {
  handleTip: function () {
    this.$emit('handle-tip', 'haha')
  }
}
Menu