Vue3父子组件通信大揭秘：Composition API下的暗号传递艺术

引言：为什么爸爸想偷偷摸摸进儿子房间？

在Vue的世界里，组件就像一群讲究隐私的邻居。父组件想让子组件帮忙做点事（比如"儿子，帮我把房间收拾一下！"），但总不能破门而入吧？这时候就需要一套优雅的"暗号系统"了。Vue3的Composition API给了我们几把钥匙，今天咱们就来玩转这些钥匙，顺便看看为什么有些钥匙是"危险品"！

方法一：ref + defineExpose------最推荐的"暗号传递法"

1. 父组件：给儿子贴个"小纸条"（ref）

vue 复制代码

<!-- 父组件 -->
<template>
  <ChildComponent ref="childRef" />
  <button @click="callChildMethod">让子组件干活</button>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const childRef = ref(null); // 准备一个"暗号接收器"

const callChildMethod = () => {
  if (childRef.value) {
    childRef.value.cleanRoom(); // 调用子组件的暗号方法！
  }
};
</script>

2. 子组件：主动暴露"暗号"（defineExpose）

vue 复制代码

<!-- 子组件 -->
<script setup>
const cleanRoom = () => {
  console.log("好嘞！正在整理房间～");
  // 这里可以写具体逻辑，比如重置表单、刷新数据等
};

// 暴露暗号！不暴露的话，父组件就是"门外汉"！
defineExpose({
  cleanRoom,
});
</script>

🌟 关键点：

defineExpose是Vue3的独门秘籍：子组件必须主动暴露方法，否则父组件就像对着门说话，没人听。
ref是暗号接收器 ：父组件通过ref拿到子组件的"门把手"，但只能打开子组件愿意暴露的门缝。

方法二：$parent------危险！强行翻墙进入！

vue 复制代码

<!-- 子组件尝试调用父组件的方法 -->
<script setup>
const complainToParent = () => {
  if (this.$parent?.parentMethod) {
    this.$parent.parentMethod("房间太乱了！"); // 强行翻墙！
  }
};
</script>

🚫 为什么不推荐？

隐私泄露风险：子组件直接操作父组件，就像邻居翻你家的墙，万一哪天父组件搬家了，子组件岂不是要迷路？
代码难以维护：父子关系变得像"连体婴"，改一个地方可能牵一发而动全身。

方法三：provide/inject------跨楼层喊话（适合远房亲戚）

如果子组件是父组件的"远房表亲"（隔了几层组件），可以用provide/inject传递方法：

vue 复制代码

<!-- 父组件 -->
<script setup>
import { provide } from 'vue';

const parentMethod = () => {
  console.log("爸爸收到消息啦！");
};

provide('parentMethod', parentMethod); // 发布暗号
</script>

<!-- 子组件 -->
<script setup>
import { inject } from 'vue';

const parentMethod = inject('parentMethod');

const callParent = () => {
  parentMethod?.("儿子想吃糖！"); // 接收暗号
};
</script>

📢 使用场景：

跨层级通信：当父子相隔太远，ref和$parent都够不着时，用这个"社区广播站"。
但别乱用！：适合特定场景，频繁使用会让代码像"社区大喇叭"，吵死人！

📊 方法对比：选择你的"暗号系统"

方法	优点	缺点	推荐指数
ref + defineExpose	封装性好，父子解耦	需主动暴露方法	★★★★★
$parent	简单粗暴，无需额外配置	耦合性高，代码难维护	★☆
provide/inject	跨层级通信，适合复杂场景	可能过度使用，增加理解成本	★★★☆

🚨 注意事项：别让暗号失效！

子组件必须暴露方法 ：defineExpose是关键，否则父组件调用会报错，就像按了不存在的门铃。
防空指针 ：父组件调用前检查childRef.value是否存在，避免null调用炸出大BUG。
别当"暗号贩子" ：只暴露必要方法，保持组件纯洁性。比如子组件的privateDiary方法，千万别暴露！

结语：组件间的友情需要"边界感"

Vue3的Composition API就像一套优雅的社交礼仪，让组件既能互相帮助，又保持恰到好处的距离。记住：ref + defineExpose是正道，其他方法是"备选锦囊"。现在，去给你的子组件发个暗号，看看它会不会乖乖干活吧！✨

🌰 互动时间：你用过哪些"奇葩"的父子组件通信方式？欢迎在评论区分享你的"暗号故事"！