$emit 触发当前实例上的事件，也可以简单的理解为触发父组件上的事件（向上冒泡），实例（当前实例）如下：
<!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("我是组件"); this.$emit('increment') } } }) new Vue({ el: '#counter-event-example', methods: { incrementTotal: function () { alert("我是当前实例"); } } }) </script> </body> </html>
当点击“点我哒”的时候，会依次跳出下面两个 alert，根据前后跳出的顺序我们可以清楚的看到事件的前后触发顺序，如图：
这样是不是就很清楚的理解 $emit 的作用了，:）
其中，我们看Vue的官方文档的时候，会发现它是这样介绍的，如图下：
从介绍当中我们可以看到，触发的方法要用字符串的方式来写（上面的例子就是这样的），另外，还提到它是可以向上传递参数的，好了，又一个例子来了，请接好：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>playload</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </head> <body> <div id="message-event-example" class="demo"> <p v-for="msg in messages">{{ msg }}</p> <button-message v-on:message="handleMessage"></button-message> </div> <script type="text/javascript"> Vue.component('button-message', { template: `<div> <input type="text" v-model="message" /> <button v-on:click="handleSendMessage">Send</button> </div>`, data: function () { return { message: 'test message' } }, methods: { handleSendMessage: function () { this.$emit('message', { message: this.message }) //this.$emit('message', this.message) //this.$emit('message', [this.message]) } } }) new Vue({ el: '#message-event-example', data: { messages: [] }, methods: { handleMessage: function (payload) { console.log(payload); this.messages.push(payload.message) //this.messages.push(payload.message) //this.messages.push(payload[0]) } } }) </script> </body> </html>
大家看到我的注释了，这其中呢，$emit 的传递的数据参数是可以定义不同的形式的，大家可以download下来，看一看不同的形式有什么具体的区别，挺有意思的。