此方法與Prop類似，區別在于Prop用于子父之間傳值，而當前所介紹的方法為任意組件可相互調用定義的屬性。

我用此方法需要解決的問題是當我點擊一個按鈕，需要改變另一個組件的樣式，因為我做的是主題切換，很多樣式是不能放在一起的。實現就是需要將點擊按鈕時的一個判斷值傳入另一個組件，調用方法通過判斷值改變樣式。具體實現為：

1.定義一個公共的js

import Vue from 'vue' export default new Vue()

2.在兩個組件中都引入此js

import PublicFunction from '../../publicFunction'

3.定義按鈕方法

show = truebeta() {PublicFunction.$emit('demo', this.show)this.show = !this.show }

我設置了一個點擊事件，點擊時觸發beta函數，并將方法寫入引入的js，傳入的參數就是show

4.調用方法

beta(show) {if (show) {this.defaultBackgroudColor = 'rgb(184,183,183)'} else {this.defaultBackgroudColor = 'rgb(247,247,247)'}}mounted() {PublicFunction.$on('demo', (show) => {this.beta(show)})}

技術棧使用的主要是Vue和typescript，所以代碼風格和傳統Vue有點不同，上面的方法和數據必要時需要放在指定的位置。

不過此方法盡量不要使用，存在方法會被調用兩次的bug，原因是切換主題時觸發頁面重新渲染，點擊時觸發一次，渲染又會觸發一次，如果方法本身有改變布爾值，絕對不能使用，相當于true變換兩次重新變回true。

方法參照了https://www.cnblogs.com/shun1015/p/13821684.html大大的，如有侵權請聯系刪除。

總結

以上是生活随笔為你收集整理的Vue 组件事件触发另一个组件的事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。