Vue3 组件之间传值

在 Vue3 中，组件之间的数据传递主要有以下几种方式，适用于不同的场景：

---

一、父组件向子组件传值：props

1. 子组件定义 props

<!-- ChildComponent.vue -->
<script setup>
// 组合式 API（推荐）
const props = defineProps({
  title: {
    type: String,
    default: '默认标题'
  },
  count: {
    type: Number,
    required: true
  }
});
</script>

<template>
  <div>{{ title }} - {{ count }}</div>
</template>

<!-- 选项式 API -->
<script>
export default {
  props: {
    title: String,
    count: {
      type: Number,
      required: true
    }
  }
}
</script>

2. 父组件传递数据

<template>
  <ChildComponent 
    :title="'Hello Vue3'" 
    :count="42"
  />
</template>

---

二、子组件向父组件传值：emit 事件

1. 子组件触发事件

<!-- ChildComponent.vue -->
<script setup>
const emit = defineEmits(['updateCount']); // 定义事件

function increment() {
  emit('updateCount', 10); // 触发事件并传递数据
}
</script>

<template>
  <button @click="increment">增加计数</button>
</template>

2. 父组件监听事件

<template>
  <ChildComponent 
    :count="count"
    @updateCount="count = $event" <!-- 接收子组件传递的值 -->
  />
</template>

<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>

---

三、双向绑定：v-model

1. 子组件支持 v-model

<!-- ChildComponent.vue -->
<script setup>
const props = defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);

function updateValue(newValue) {
  emit('update:modelValue', newValue);
}
</script>

<template>
  <input 
    :value="modelValue" 
    @input="updateValue($event.target.value)"
  >
</template>

2. 父组件使用 v-model

<template>
  <ChildComponent v-model="text" /> <!-- 自动同步数据 -->
</template>

<script setup>
import { ref } from 'vue';
const text = ref('初始值');
</script>

---

四、跨层级传值：provide / inject

1. 祖先组件提供数据

<!-- AncestorComponent.vue -->
<script setup>
import { provide, ref } from 'vue';

const theme = ref('dark');
provide('theme', theme); // 提供数据
</script>

2. 后代组件注入数据

<!-- ChildComponent.vue -->
<script setup>
import { inject } from 'vue';

const theme = inject('theme'); // 注入数据
</script>

<template>
  <div :class="theme">当前主题：{{ theme }}</div>
</template>

---

五、通过 Context 共享数据（如 Pinia 状态管理）

1. 安装 Pinia

npm install pinia

2. 创建 Store

// stores/counter.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++;
    }
  }
});

3. 组件中使用 Store

<template>
  <div>Count: {{ counterStore.count }}</div>
  <button @click="counterStore.increment()">+1</button>
</template>

<script setup>
import { useCounterStore } from '@/stores/counter';

const counterStore = useCounterStore();
</script>

---

总结：不同场景的传值方式

场景	方法	适用性
父子组件直接通信	props + emit	父子层级明确，数据流单向
表单输入双向绑定	v-model	表单类组件（如输入框、下拉框）
跨层级组件通信	provide / inject	深层次嵌套组件（如全局配置、主题）
复杂应用状态共享	Pinia / Vuex	多组件共享状态（推荐中大型项目）

推荐实践：

• 优先使用 props 和 emit 实现父子通信。
• 简单双向绑定用 v-model，复杂逻辑用事件。
• 跨层级或全局状态使用 Pinia。
• 避免过度依赖 provide/inject，可能导致组件耦合。