$emit triggers the event on the current instance, which can also be simply understood as triggering the event on the parent component (bubbling up). The instance (current instance) is as follows:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>session</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <style type="text/css"> #session { width: 600px; margin: 0 auto; text-align: center; } </style> </head> <body> <div id="counter-event-example"> <button-counter v-on:increment="incrementTotal"></button-counter> </div> <script> Vue.component('button-counter', { template: '<button v-on:click="incrementCounter">点我哒</button>', methods: { incrementCounter: function () { alert( " I am a component " ); this .$emit( ' increment ' ) } } }) new View({ el: '#counter-event-example', methods: { incrementTotal: function () { alert( " I am the current instance " ); } } }) </script> </body> </html>
When clicking "click me", the following two alerts will jump out in turn. According to the order of jumping out before and after, we can clearly see the triggering sequence of events before and after, as shown in the figure:
This is not a very clear understanding of the role of $emit, :)