Vue3 跨层级组件通信：Provide 与 Inject 机制详解

如何修改上级数据

直接传递基本类型（如字符串、数字）时，后代组件只能读取，无法修改。若需双向交互，有两种推荐方式：传递响应式对象或传递修改函数。

方案一：传递响应式对象

利用 reactive 或 ref 包裹数据，后代组件修改属性后，祖先组件视图会自动更新。

// Parent.vue
<script>
import { reactive, provide } from 'vue';
import Child from './Child.vue';

export default {
  components: { Child },
  setup() {
    // 创建响应式对象
    const message = reactive({ text: "Hello from Parent!" });
    provide('message', message);
    return { message };
  }
};
</script>

// Child.vue
<script>
import { inject } from 'vue';

export default {
  setup() {
    const message = inject('message');

    const changeMessage = () => {
      // 直接修改对象属性，触发响应式更新
      message.text = "Updated message from Child!";
    };

    return { message, changeMessage };
  }
};
</script>

注意：虽然技术上可行，但直接修改注入的数据违背了单向数据流原则，建议谨慎使用，优先选择方案二。

方案二：传递修改函数

将修改逻辑封装在函数中传给后代，由祖先组件控制状态变更。这是更推荐的模式。

// Parent.vue
<script>
import { ref, provide } from 'vue';
import Child from './Child.vue';

export default {
  components: { Child },
  setup() {
    const message = ref("Hello from Parent!");

    // 暴露修改方法
    const changeMessage = (newMsg) => {
      message.value = newMsg;
    };

    provide('changeMessage', changeMessage);
    return { message };
  }
};
</script>

// Child.vue
<script>
import { inject } from 'vue';

export default {
  setup() {
    const changeMessage = inject('changeMessage');

    const handleUpdate = () => {
      changeMessage("Message updated from Child!");
    };

    return { handleUpdate };
  }
};
</script>

总结

provide / inject 是解决依赖注入问题的标准方案。相比多层 props 传递，它能显著降低组件耦合度。但在实际使用中，建议尽量保持数据流向清晰，避免过度滥用导致调试困难。