如何在Vue中由单个子组件触发时更改多个子组件的颜色

// EventBus.js
import Vue from 'vue'
export default new Vue()

<template>
  <div>
    <button @click="changeColor">改变颜色</button>
  </div>
</template>

<script>
import EventBus from './EventBus'

export default {
  methods: {
    changeColor() {
      // 发送自定义事件，并传递要改变的颜色信息
      EventBus.$emit('color-change', 'red')
    }
  }
}
</script>

<template>
  <div>
    <p :style="{ color: textColor }">子组件1</p>
    <p :style="{ color: textColor }">子组件2</p>
    <p :style="{ color: textColor }">子组件3</p>
  </div>
</template>

<script>
import EventBus from './EventBus'

export default {
  data() {
    return {
      textColor: ''
    }
  },
  created() {
    // 监听自定义事件，当事件触发时执行回调函数
    EventBus.$on('color-change', this.changeTextColor)
  },
  methods: {
    changeTextColor(color) {
      // 根据接收到的颜色信息改变文本颜色
      this.textColor = color
    }
  },
  beforeDestroy() {
    // 组件销毁时，取消事件监听
    EventBus.$off('color-change', this.changeTextColor)
  }
}
</script>