一、$emit
1、this $emit（‘自定義事件名’,要傳送的資料）；
2、觸發目前執行個體上的事件，要傳遞的資料會傳給監聽器；
二、$on
1、this. o n ( ′ 事 件 名 ′ , c a l l b a c k ) c a l l b a c k 回 調 on('事件名',callback) callback回調 on(′事件名′,callback)callback回調emit要傳送的資料；
2、監聽目前執行個體上自定義事件；
三、執行個體
<html>
<head>
<title>$emit 和 $on</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<button @click="boost">觸發事件</button>
</div>
<script>
new Vue({
el: '#root',
data() {
return {
message: 'hello vue'
}
},
created() {
this.$on('my_events', this.handleEvents)
//可以多個監聽事件共同使用同一個回調函數
//可以一個監聽事件使用多個回調函數，回調函數的調用按順序調用
//this.$on('my_events2', this.handleEvents)
//this.$on('my_events3', this.handleEvents)
//this.$on('my_events4', this.handleEvents)
//$on第一個參數可以接受一個數組，也就是多個監聽事件使用同一個回調函數
// this.$on(['my_events','events2','events3'], this.handleEvents)
},
methods: {
handleEvents(e) {
console.log(this.message, e)
},
boost() {
this.$emit('my_events', 'my params')
}
}
})
</script>
</body>
</html>
1.應用場景，一般在子元件使用this.$emit(‘my_events’, ‘my params’) 定義事件名稱my_events，還可以傳遞資料，列如：‘my params’，
2.然後在父元件中使用 this.on(‘my_events’, this.handleEvents)監聽子元件何時出發的方法，my_events是子元件定義的事件名字，this.handleEvents(e){},是this.$on的回調函數，其中e是子元件傳遞過來的資料。
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)