Vue组件通信全攻略：子父组件通信的多种实现方式

原创于 2025-08-21 08:49:18 发布 · 781 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

关键词：Vue组件通信、父子组件、props、$emit、v-model、provide/inject

1. 引言

在Vue应用中，组件化是核心思想之一。组件之间需要相互通信才能协同工作。其中，父组件向子组件传递数据和子组件向父组件传递信息是最常见、最基础的通信场景。本文将系统性地介绍这些通信方式，帮助开发者构建高效、可维护的Vue应用。

2. 父组件向子组件通信：`props`

props是父组件向子组件传递数据的标准方式。它是一种单向数据流，确保了数据流向的清晰性。

2.1 基本用法

子组件 (ChildComponent.vue)

<template>
  <div>
    <h3>{{ title }}</h3>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    title: {
      type: String,
      required: true
    },
    content: {
      type: String,
      default: '默认内容'
    }
  }
}
</script>

父组件 (ParentComponent.vue)

<template>
  <div>
    <child-component 
      :title="parentTitle" 
      :content="parentContent" 
    />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  data() {
    return {
      parentTitle: '来自父组件的标题',
      parentContent: '来自父组件的内容'
    }
  }
}
</script>

2.2 Props验证与默认值

Vue提供了强大的props验证机制，可以定义类型、是否必需、默认值以及自定义验证函数：

props: {
  // 基础类型检查
  age: Number,
  
  // 多种类型
  status: [String, Number],
  
  // 必填且带默认值
  isActive: {
    type: Boolean,
    required: true,
    default: false
  },
  
  // 对象/数组的默认值必须从一个工厂函数返回
  userInfo: {
    type: Object,
    default: () => ({})
  },
  
  // 自定义验证函数
  customProp: {
    validator(value) {
      return ['success', 'warning', 'danger'].includes(value)
    }
  }
}

3. 子组件向父组件通信：`$emit`

$emit是子组件向父组件发送事件的标准方式，是实现子父通信的核心机制。

3.1 基本用法

子组件 (ChildComponent.vue)

<template>
  <div>
    <button @click="handleClick">点击通知父组件</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 触发名为 'update' 的自定义事件，并传递数据
      this.$emit('update', { message: '子组件的数据', timestamp: Date.now() })
    }
  }
}
</script>

父组件 (ParentComponent.vue)

<template>
  <div>
    <child-component @update="handleUpdate" />
    <p>接收到的消息：{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    handleUpdate(data) {
      this.message = data.message
      console.log('从子组件接收到数据:', data)
    }
  }
}
</script>

3.2 事件命名注意事项

在DOM模板中，事件名会自动转换为小写（如updateTitle会变成updatetitle），建议使用kebab-case命名：

<!-- 子组件 -->
this.$emit('update-title', newTitle)

<!-- 父组件 -->
<child-component @update-title="handleUpdate" />

4. 双向绑定：`v-model`

v-model本质上是props和$emit的语法糖，用于实现数据的双向绑定。

4.1 基础`v-model`

子组件

<template>
  <input 
    :value="modelValue" 
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue'] // 显式声明触发的事件
}
</script>

父组件

<template>
  <div>
    <child-component v-model="parentData" />
    <p>输入内容：{{ parentData }}</p>
  </div>
</template>

4.2 自定义`v-model`参数（Vue 2.3+）

可以指定不同的prop和事件名：

<!-- 子组件 -->
<template>
  <input 
    :value="title" 
    @input="$emit('update:title', $event.target.value)"
  />
</template>

<script>
export default {
  props: ['title'],
  emits: ['update:title']
}
</script>

<!-- 父组件 -->
<child-component v-model:title="pageTitle" />

4.3 多个`v-model`（Vue 3）

Vue 3支持在单个组件上使用多个v-model：

<!-- 子组件 -->
<template>
  <input 
    :value="title" 
    @input="$emit('update:title', $event.target.value)"
  />
  <input 
    :value="content" 
    @input="$emit('update:content', $event.target.value)"
  />
</template>

<script>
export default {
  props: ['title', 'content'],
  emits: ['update:title', 'update:content']
}
</script>

<!-- 父组件 -->
<child-component 
  v-model:title="pageTitle" 
  v-model:content="pageContent" 
/>

4.4 `defineModel` 语法糖（Vue 3.4+）

Vue 3.4引入了defineModel宏，极大简化了v-model的实现：

<script setup>
// 使用 defineModel，自动创建 modelValue prop 和 update:modelValue 事件
const model = defineModel()

function handleChange(e) {
  model.value = e.target.value // 直接修改，自动触发更新
}
</script>

<template>
  <input :value="model" @input="handleChange" />
</template>

5. 高级通信方式

5.1 `$attrs` 和 `$listeners`（Vue 2）/ `$attrs`（Vue 3）

当需要将父组件的attribute和事件监听器传递给子组件的根元素时非常有用。

父组件

<child-component 
  title="标题" 
  @click="handleClick" 
  @focus="handleFocus"
/>

子组件 (Vue 2)

<template>
  <div v-bind="$attrs" v-on="$listeners">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  inheritAttrs: false // 阻止将属性绑定到根元素
}
</script>

子组件 (Vue 3)

<template>
  <div v-bind="$attrs">
    <!-- $attrs 包含所有非props的attribute和事件监听器 -->
  </div>
</template>

<script>
export default {
  inheritAttrs: false
}
</script>

5.2 `provide` 和 `inject`

用于祖先组件向后代组件传递数据，避免逐层传递props。

祖先组件

<script>
import { provide, ref } from 'vue'

export default {
  setup() {
    const theme = ref('dark')
    const updateTheme = (newTheme) => {
      theme.value = newTheme
    }

    // 提供数据和方法
    provide('theme', theme)
    provide('updateTheme', updateTheme)

    return { theme }
  }
}
</script>

后代组件

<script>
import { inject } from 'vue'

export default {
  setup() {
    const theme = inject('theme')
    const updateTheme = inject('updateTheme')

    const changeTheme = () => {
      updateTheme('light')
    }

    return { theme, changeTheme }
  }
}
</script>