Vue中如何基于兄弟组件C2的事件触发C1的变更事件？

这是个很典型的Vue组件间状态同步+事件触发的问题，结合你提到的已有根级别Event Bus，我给你几个符合Vue设计思想的优雅解决方案：

方案1：利用全局Event Bus（最贴合题目现有条件） #

既然项目已经有根元素级别的Event Bus，直接用它来做跨组件事件通知是最直接的：

步骤： #

1. C2修改数据后发布事件：在C2完成共享对象属性修改后，通过Event Bus发布一个自定义事件（比如shared-data-updated）
2. C1订阅事件触发保存：在C1的生命周期钩子中订阅这个事件，触发原本由change事件触发的保存逻辑
3. 销毁订阅防止内存泄漏：在C1卸载前取消事件订阅，避免内存问题

代码示例： #

C2组件：

<script>
export default {
  props: ['sharedObj'],
  methods: {
    updateProperty(newValue) {
      // 直接修改共享对象属性（引用传递，C1会同步看到变化）
      this.sharedObj.targetProp = newValue;
      // 通过根Event Bus发布事件
      this.$root.$emit('shared-data-updated');
    }
  }
}
</script>

C1组件：

<script>
export default {
  props: ['sharedObj'],
  created() {
    // 订阅事件，绑定保存逻辑
    this.$root.$on('shared-data-updated', this.handleSave);
  },
  beforeUnmount() {
    // 组件卸载前销毁订阅
    this.$root.$off('shared-data-updated', this.handleSave);
  },
  methods: {
    handleSave() {
      // 这里是你原本C1中change事件触发的AJAX保存逻辑
      // 示例：axios.post('/api/save', this.sharedObj);
      console.log('保存数据到服务器:', this.sharedObj);
    }
  }
}
</script>

方案2：父组件中转事件（更符合组件通信规范） #

如果不想依赖全局Event Bus，或者希望组件间通信更明确，可以让父组件P作为中间层，负责传递事件：

步骤： #

1. C2向父组件触发事件：C2修改数据后，向父组件触发data-updated事件
2. 父组件通知C1：父组件通过ref调用C1的保存方法，或者向C1触发自定义事件
3. C1执行保存：响应父组件的通知，执行保存逻辑

代码示例： #

C2组件：

<script>
export default {
  props: ['sharedObj'],
  methods: {
    updateProperty(newValue) {
      this.sharedObj.targetProp = newValue;
      // 向父组件触发事件
      this.$emit('data-updated');
    }
  }
}
</script>

父组件P：

<template>
  <div class="parent-container">
    <!-- 给C1添加ref，方便调用其方法 -->
    <C1 ref="c1Instance" :shared-obj="sharedData" />
    <!-- 监听C2的事件，触发通知逻辑 -->
    <C2 :shared-obj="sharedData" @data-updated="triggerC1Save" />
  </div>
</template>

<script>
import C1 from './C1.vue';
import C2 from './C2.vue';

export default {
  components: { C1, C2 },
  data() {
    return {
      sharedData: { targetProp: '' }
    }
  },
  methods: {
    triggerC1Save() {
      // 通过ref直接调用C1的保存方法
      this.$refs.c1Instance.handleSave();
    }
  }
}
</script>

C1组件：

保留你原本的handleSave方法即可，无需额外修改。

方案3：Vuex管理共享状态（大型项目推荐） #

如果你的项目是中大型应用，建议用Vuex统一管理共享状态，这样状态变更和保存逻辑会更清晰：

步骤： #

1. 将共享对象存入Vuex State
2. C2通过Mutation修改状态：避免直接修改State，符合Vuex规范
3. C1监听State变化或通过Action触发保存：可以通过watch监听State变化，或者在Mutation后触发保存Action

代码示例： #

Vuex Store：

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    sharedObj: { targetProp: '' }
  },
  mutations: {
    // 定义修改状态的Mutation
    UPDATE_SHARED_PROP(state, { key, value }) {
      state.sharedObj[key] = value;
    }
  },
  actions: {
    // 定义保存数据的Action
    async saveSharedData({ state }) {
      try {
        await axios.post('/api/save', state.sharedObj);
        console.log('保存成功');
      } catch (err) {
        console.error('保存失败:', err);
      }
    }
  }
});

C2组件：

<script>
export default {
  methods: {
    updateProperty(newValue) {
      // 通过Mutation修改状态
      this.$store.commit('UPDATE_SHARED_PROP', {
        key: 'targetProp',
        value: newValue
      });
      // 触发保存Action
      this.$store.dispatch('saveSharedData');
    }
  }
}
</script>

C1组件：

<script>
export default {
  computed: {
    // 从Vuex获取共享状态
    sharedObj() {
      return this.$store.state.sharedObj;
    }
  },
  watch: {
    // 深度监听状态变化，自动触发保存
    sharedObj: {
      deep: true,
      handler() {
        this.$store.dispatch('saveSharedData');
      }
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者DatsunBing