vm.$emit(event, [...args]) 觸發當前實例上的事件，附加參數都會傳給監聽器回調。
涉及到組件之間的通信的問題，組件之間的通信可以分為以下幾種：
- 父子組件傳遞，父向子傳遞采用 props，子向父采用事件 emit。
- 非父子組件的傳遞，全局 event bus, 創建一個新的 vue 的實例，采用事件的方式通信，再者采用 vuex 全局狀態管理。
父子組件相互通信方法詳情
- 子組件通過 $emit 調用父組件的 method
// 父組件中定義 @updateInfo 調用的方法 <template> <user-popup @updateInfo="updateInfo"></user-popup> </template> methods: { updateInfo() { xxxxxx }, }, // 子組件在某個方法中進行調用，例如 saveInfomation() { this.$emit('updateInfo'); }, - 父組件通過 prop 向子組件進行傳值
// 父組件內定義傳遞給子組件的值 userInformation <template> <child :userInformation="userInfo"></child> </template> data() { return { userInfo: { type: Object, required: true, }, }; }, // 子組件內通過 prop 獲取父組件傳遞的值 userInformation <template> <label>姓名：</label><span>{{userInformation.username}}</span> </template> props: { userInformation: { type: Object, required: true, } } - 父組件通過 $refs 調用子組件的 method
<template> <child ref="son"></child> </template> method: { parentMethod() { this.$refs.son.childMethod(); }, }, - 直接用
this.$parent.xxx調用父組件的方法
parent (Vue instance)：指定已創建的實例之父實例，在兩者之間創立父子關系。子實例可以用
this.$parent訪問父實例，子實例被推入父實例的$children數組中。
注意：this.$parent和this.$children 是訪問組件的應急方法，更推薦使用 prop和event實現父子組件通信。
非父子組件相互通信方法詳情
- event bus
情景描述：brother.vue 和 sister.vue 兩姊妹要通信，sister 要知道 brother 被點擊了多少次，由於它們師兄和師妹的關系（平級），所以需要一個新的中間件 globalBus 來進行消息的傳遞。
globalBus.js
import Vue from 'vue'; export const globalBus = new Vue(); 這里 import 了一個 vue 類，然后實例化並且將它 export, 實際上是創建了一個與 DOM 和程序的其他部分完全解耦的組件，它僅僅是一個組件所以非常的輕量。
brother.vue
<template> <button @click="clickCount"></button> </template> import { globalBus } from './globalBus'; export default { data() { return { counts: 0, }; }, method: { clickCount() { this.counts++; globalBus.$emit('countNumber', this.counts); }, }, } 觸發了 globalBus 的 countNumber 事件，返回參數 this.counts。
sister.vue
import { globalBus } from './globalBus'; export default { created() { this.total(); }, method: { total() { globalBus.$on('countNumber', (number) => { console.log(`brother 被點擊了 ${number} 次。`); }); }, }, } 監聽 globalBus 的 countNumber 方法
另外的，我在項目中看到了另一種寫法 globalBus.$emit('user-manage:updateInfo'); 我的理解是觸發 user-usermage 文件的 updateInfo 方法。
作者：vivi_0833
鏈接：https://www.jianshu.com/p/01c7e752684e
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。