The $EMIT triggers events on the current instance, or it can be simply understood to trigger events on the parent component (bubbling up), as in the instance (the current instance):
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge,chrome=1" /> <title>Session</title> <Scriptsrc= "Https://unpkg.com/vue/dist/vue.js"></Script> <styletype= "Text/css">#session{width:600px;margin:0 Auto;text-align:Center; } </style> </Head> <Body> <DivID= "Counter-event-example"> <Button-counterv-on:increment= "Incrementtotal"></Button-counter> </Div> <Script>Vue.component ('Button-counter', {Template:'<button v-on:click= "Incrementcounter" > Points my </button>', methods: {incrementcounter:function() {alert ("I'm a component ."); This. $emit ('Increment') } } }) NewVue ({el:'#counter-event-example', methods: {incrementtotal:function() {alert ("I am the current instance"); } } }) </Script> </Body></HTML>
When you click on "Point My Da", you will jump out of the following two alert, according to the order of jumping before and after we can clearly see the pre-and post-event triggering sequence,
This is not very clear understanding of the role of $emit,:)
Vue.js Study Notes (3)-Quick understanding of $emit effects