Vue3 组件通信进阶秘籍：精准择取通信方式，赋能高效项目协作

最新推荐文章于 2025-04-08 23:04:14 发布

原创

最新推荐文章于 2025-04-08 23:04:14 发布 · 1.6k 阅读

41 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #开发语言

在 Vue3 构建的前端世界里，组件如同精密仪器的零部件，各自承担独特功能。而组件间顺畅、高效的通信，则是保障整个应用有条不紊运行的关键“润滑剂”。今天，就让我们沿着不同组件关系的脉络，深度挖掘 Vue3 丰富多样的组件通信方式，为你的项目开发注入强劲动力，且全程搭配 Vue3 语法实例，助你快速上手实践。

一、父传子：数据与指令的精准投喂

父子组件是 Vue3 应用最基础、常见的架构单元，父组件往往掌握关键数据与指令，需精准传递给子组件。

1. props：经典且可靠的桥梁

props 无疑是父传子的首选利器。父组件在调用子组件时，通过自定义属性绑定数据，宛如搭建一座专属桥梁，将信息安全送达子组件。子组件利用 props 选项优雅接收，这些数据瞬间化身响应式数据，随时可供渲染或二次加工。

示例如下，在 Vue3 的 setup 函数写法里：

// 父组件
<template>
  <ChildComponent :user-info="parentUserInfo" />
</template>
<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
export default {
  components: { ChildComponent },
  setup() {
    const parentUserInfo = ref({ name: "张三", age: 25 });
    return { parentUserInfo };
  }
};
</script>

// 子组件
<template>
  <p>姓名：{
  
  { userInfo.name }}</p>
  <p>年龄：{
  
  { userInfo.age }}</p>
</template>
<script>
import { toRefs } from 'vue';
export default {
  setup(props) {
    const { userInfo } = toRefs(props);
    return { userInfo };
  },
  props: ['userInfo']
};
</script>

此处，父组件借助 ref 创建响应式数据 parentUserInfo，传递给子组件；子组件用 toRefs 解构 props，方便在模板里直接使用响应式数据，避免数据丢失响应特性。

2. v-model：双向绑定的魔法纽带

v-model 在 Vue3 中大放异彩，不仅服务于表单元素，还成功跨界到父子组件通信领域。它巧妙融合 props 与自定义事件，达成父子间数据实时双向同步。父组件时刻洞悉子组件内数据异动，反之，子组件也能敏锐捕捉父组件指令变化。

// 父组件
<template>
  <ChildComponent v-model="parentText" />
</template>
<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
export default {
  components: { ChildComponent },
  setup() {
    const parentText = ref("初始文本");
    return { parentText };