Vue父子组件这样通信才叫秀！实操技巧大放送

Vue父子组件通信是Vue开发中的核心技能。本文深入解析Vue中四种常见的父子组件通信方式，并结合实战代码示例，助你掌握Vue父子组件通信技巧。文章详细讲解了通过props进行父传子、使用$emit实现子传父、利用v-model进行双向数据绑定，以及通过ref调用子组件方法。每种方法都配有清晰的代码示例和适用场景分析，旨在帮助开发者写出更清晰、更易维护的Vue代码，提升开发效率，避免常见误区，从而构建更健壮的Vue应用。

在 Vue 中，父子组件通信有四种常见方式。1. 父传子：通过 props 传递数据，子组件声明接收的属性，父组件绑定动态值；2. 子传父：使用 $emit 触发自定义事件，父组件监听并处理；3. 双向绑定：通过 v-model 实现，本质是 props 和 $emit 的语法糖，也可用 .sync 修饰符自定义；4. 方法调用：利用 ref 让父组件直接访问子组件的方法或数据。每种方式都有其适用场景，合理使用可提升代码清晰度与可维护性。

在 Vue 中，父子组件通信是开发中最基础也是最常用的功能之一。实现方式简单直接，但理解清楚每种方式的适用场景能让你写出更清晰、可维护的代码。

1. 父传子：通过 props

父组件向子组件传递数据，最常见的方式就是使用 props。你可以把 props 想象成子组件对外声明的“接收口”，父组件通过这个接口传值进去。

比如你有一个子组件 ChildComponent，它需要接收一个名字：

<!-- ChildComponent.vue -->
<template>
  <div>你好，{{ name }}</div>
</template>

<script>
export default {
  props: ['name']
}
</script>

父组件这样使用它：

<!-- ParentComponent.vue -->
<child-component :name="parentName" />

这里用的是动态绑定（:name），这样父组件中的 parentName 数据一变，子组件也会同步更新。

注意点：

• props 是单向数据流，不建议在子组件中直接修改 props 的值。
• 可以给 props 设置类型校验和默认值，提高健壮性。

2. 子传父：通过自定义事件

子组件想通知父组件做点什么，通常是用 $emit 触发一个自定义事件，然后父组件监听这个事件。

比如你想让子组件点击按钮后告诉父组件一个信息：

<!-- ChildComponent.vue -->
<template>
  <button @click="notifyParent">点我</button>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      this.$emit('message', '我是子组件的消息')
    }
  }
}
</script>

父组件监听这个事件：

<!-- ParentComponent.vue -->
<child-component @message="handleMessage" />

<script>
export default {
  methods: {
    handleMessage(msg) {
      console.log('收到消息：', msg)
    }
  }
}
</script>

这种方式非常适合处理用户交互后的反馈，比如表单提交、选项变更等。

3. 使用 v-model 实现双向绑定（其实是语法糖）

Vue 提供了 v-model 来简化父子组件之间的双向绑定，其实它底层还是基于 props 和 $emit。

比如你在子组件里定义了一个 value 的 prop，并在改变时触发 input 事件：

<!-- ChildComponent.vue -->
<input :value="value" @input="$emit('input', $event.target.value)" />

父组件就可以这样使用：

<child-component v-model="parentData" />

这等价于：

<child-component :value="parentData" @input="parentData = $event" />

如果你不想用 value 和 input 这两个默认名，还可以用 .sync 修饰符或者自定义 model。

4. 父子组件方法调用（ref）

有时候你需要父组件直接调用子组件的方法，或者访问子组件的数据，可以用 ref。

比如你在子组件里写个方法：

<!-- ChildComponent.vue -->
<script>
export default {
  methods: {
    sayHello() {
      console.log('Hello from child')
    }
  }
}
</script>

父组件拿到这个 ref 后可以调用：

<child-component ref="childRef" />

<script>
export default {
  mounted() {
    this.$refs.childRef.sayHello()
  }
}
</script>

这种方式适合做一些初始化操作或主动触发子组件行为，但要小心别滥用，否则容易破坏组件封装性。

基本上就这些。父子通信看似简单，但在实际项目中合理选择方式，能让组件之间协作更顺畅，也更容易调试和维护。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~