vue3+ts的父子传值

<think>好的，用户想了解在Vue3与TypeScript项目中如何实现父子组件之间的传值。我需要先回顾一下Vue3中父子组件通信的主要方法，并结合TypeScript的用法来回答。 首先，父传子通常使用props，Vue3的setup语法糖中可以用defineProps来定义。记得在TypeScript中需要指定类型，比如使用接口或直接定义类型。然后给出一个示例代码，展示父组件如何传递数据，子组件如何接收。 接下来是子传父，这部分应该用defineEmits来定义事件。需要说明如何在子组件中触发事件，并传递数据，父组件监听这些事件并处理。同样，TypeScript中需要定义事件的类型，比如使用泛型来指定事件名和参数类型。 用户的问题还提到了示例，所以需要分别给出父组件和子组件的代码示例，可能包括模板部分和脚本部分。要注意代码格式的正确性，比如使用v-bind传递props，使用@事件名监听子组件事件。 另外，可能用户还关心其他通信方式，比如provide/inject，但问题主要集中在父子组件，所以可能不需要深入讨论，但可以简要提及作为扩展。 需要检查引用的资料，确保示例和说明符合最佳实践，比如使用kebab-case的事件名，TypeScript的类型定义等。引用中提到的双向绑定v-model也是一个点，可以加入示例，比如使用多个v-model绑定不同属性。 最后，确保回答结构清晰，分点说明父传子和子传父的步骤，每个部分都有代码示例，并解释关键点。同时，生成的相关问题要围绕Vue3和TypeScript的组件通信，比如性能优化、复杂数据传递或双向绑定的实现。</think>在 Vue3 与 TypeScript 项目中，父子组件通信主要通过 $`defineProps` 和 `defineEmits` 实现，以下是具体实现方式和代码示例： --- ### 一、父组件向子组件传值 #### 1. 定义带类型约束的 Props ```typescript // 子组件 Child.vue <script setup lang="ts"> interface Props { title: string; count?: number; // 可选属性 } const props = defineProps<Props>(); </script> <template> <h2>{{ title }}</h2> <p>计数器: {{ count ?? 0 }}</p> </template> ``` #### 2. 父组件传递数据 ```typescript // 父组件 Parent.vue <template> <Child title="来自父组件的消息" :count="counter" /> </template> <script setup lang="ts"> import { ref } from 'vue'; import Child from './Child.vue'; const counter = ref(5); </script> ``` *通过泛型定义 Props 类型，实现编译时类型检查[^2]* --- ### 二、子组件向父组件传值 #### 1. 定义带类型的事件发射器 ```typescript // 子组件 Child.vue <script setup lang="ts"> const emit = defineEmits<{ (e: 'updateCount', value: number): void (e: 'submitForm', payload: { id: string }): void }>(); const handleClick = () => { emit('updateCount', 10); // 触发自定义事件 } </script> ``` #### 2. 父组件监听事件 ```typescript // 父组件 Parent.vue <template> <Child @update-count="handleUpdate" @submit-form="handleSubmit" /> </template> <script setup lang="ts"> const handleUpdate = (num: number) => { console.log('收到新数值:', num); } const handleSubmit = (data: { id: string }) => { alert(`提交ID: ${data.id}`); } </script> ``` *事件名推荐使用 kebab-case 格式，保持 HTML 特性规范[^4]* --- ### 三、双向数据绑定（v-model 增强） #### 1. 组件实现 ```typescript // 子组件 InputField.vue <script setup lang="ts"> const props = defineProps<{ modelValue: string }>(); const emit = defineEmits<{ (e: 'update:modelValue', value: string): void }>(); const updateValue = (e: Event) => { const val = (e.target as HTMLInputElement).value; emit('update:modelValue', val.trim()); // 自动去除空格 } </script> <template> <input :value="modelValue" @input="updateValue"> </template> ``` #### 2. 父组件使用 ```typescript // 父组件 Parent.vue <template> <InputField v-model="username"/> </template> <script setup lang="ts"> import { ref } from 'vue'; const username = ref(''); </script> ``` *通过 `update:modelValue` 事件实现双向绑定，支持自定义修饰逻辑* --- ### 四、最佳实践建议 1. 复杂对象数据传递时使用 `reactive` ```typescript // 父组件 <Child :config="reactive({ pageSize: 10, total: 100 })"/> // 子组件 defineProps<{ config: { pageSize: number; total: number } }>(); ``` 2. 通过 `withDefaults` 设置默认值 ```typescript const props = withDefaults(defineProps<{ ratio?: number }>(), { ratio: 16/9 // 默认宽高比 }); ``` ---