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

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

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 }

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

4.調(diào)用方法

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)})}

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。