Vue 3 的父子组件传值主要遵循单向数据流的原则：父传子 和 子传父。

Vue 3 的父子组件传值主要遵循单向数据流的原则：父传子和子传父。
以下是详细的实现方式、代码示例以及注意事项。

1. 父传子

父组件通过自定义属性传递数据，子组件通过defineProps接收数据。

核心步骤：

1. 父组件：在子组件标签上绑定属性（如:title="msg"）。
2. 子组件：使用defineProps声明并接收属性。

代码示例：

父组件

<template><div><h2>父组件</h2><!-- 1. 传递静态值 --><ChildComponenttitle="静态标题"/><!-- 2. 传递动态变量 --><ChildComponent:title="parentMsg":age="18"/></div></template><scriptsetup>importChildComponentfrom'./ChildComponent.vue'import{ref}from'vue'constparentMsg=ref('来自父组件的动态消息')</script>

子组件

<template><divclass="child-box"><p>子组件接收到的标题：{{ title }}</p><p>年龄：{{ age }}</p></div></template><scriptsetup>// 2. 使用 defineProps 接收// 写法一：数组写法（简单，但不直观）// defineProps(['title', 'age'])// 写法二：对象写法（推荐，可以限制类型和默认值）constprops=defineProps({title:{type:String,required:true,// 必填default:'默认标题'// 默认值},age:{type:Number,default:0}})// 注意：在 JS 中使用 props 变量需要通过 props.titleconsole.log(props.title)</script>

⚠️ 注意：

• 在<template>模板中直接使用变量名（如title）。
• 在<script>代码中，需要通过props.title访问。
• 不要在子组件中直接修改 props 传来的值（如props.title = 'new'），这会违反单向数据流，导致报错。

2. 子传父

父组件通过自定义事件接收数据，子组件通过defineEmits触发事件并传参。

核心步骤：

1. 父组件：在子组件标签上监听事件（如@change-msg="handleMsg"）。
2. 子组件：使用defineEmits声明事件，并在合适时机调用emit('事件名', 数据)。

代码示例：

父组件

<template><div><h2>父组件收到的消息：{{ msgFromChild }}</h2><!-- 1. 绑定自定义事件 change-msg --><ChildComponent@change-msg="handleChange"/></div></template><scriptsetup>importChildComponentfrom'./ChildComponent.vue'import{ref}from'vue'constmsgFromChild=ref('等待子组件发送...')// 3. 定义处理函数，接收子组件传来的参数consthandleChange=(newMsg)=>{msgFromChild.value=newMsg}</script>

子组件

<template><button@click="sendToParent">点击向父组件传值</button></template><scriptsetup>// 1. 声明要触发的事件constemit=defineEmits(['change-msg'])constsendToParent=()=>{constmessage='你好父组件，我是子组件'// 2. 触发事件并传递数据emit('change-msg',message)}</script>

💡 技巧：
Vue 官方推荐事件命名使用kebab-case (短横线命名)，如@update-value，因为在 HTML 模板中不区分大小写，@updateValue可能会被解析成@updatevalue。

3. 双向绑定

如果你想要实现“父传子，子修改后自动传回父”的效果（类似v-model），Vue 3 提供了更简便的方式。

方式一：使用v-model(推荐)

Vue 3 的v-model默认绑定了modelValue属性和update:modelValue事件。
父组件

<template><!-- 等同于 :modelValue="text" @update:modelValue="text = $event" --><ChildInputv-model="text"/></template>

子组件

<template><!-- 必须绑定 value 并触发 input 事件 --><inputtype="text":value="modelValue"@input="$emit('update:modelValue', $event.target.value)"/></template><scriptsetup>defineProps(['modelValue'])defineEmits(['update:modelValue'])</script>

方式二：defineModel宏 (Vue 3.4+ 最新语法)

这是一个编译器宏，大大简化了双向绑定的代码。
子组件

<scriptsetup>// 自动定义 props 和 emit，返回一个可写的 refconstmodelValue=defineModel()// 修改 modelValue.value 会自动同步到父组件</script><template><inputv-model="modelValue"/></template>

4. 父组件直接操作子组件

如果父组件想要直接调用子组件的方法或访问其数据，可以通过ref获取子组件实例。
父组件

<template><ChildComponentref="childRef"/><button@click="callChildMethod">调用子组件方法</button></template><scriptsetup>import{ref}from'vue'importChildComponentfrom'./ChildComponent.vue'// 1. 定义与 ref 同名的变量constchildRef=ref(null)constcallChildMethod=()=>{// 3. 通过 value 访问子组件暴露的方法childRef.value.someMethod()}</script>

子组件

<scriptsetup>constsomeMethod=()=>{console.log('子组件方法被调用了！')}// 2. 必须使用 defineExpose 暴露方法或属性，父组件才能通过 ref 调用defineExpose({someMethod})</script>

总结图表