<think>好的，用户现在问的是
Vue3中
props和emits的用法。之前他们遇到的问题是当下拉框修改时，没有触发alert，现在已经解决了这个问题，可能现在想更深入了解
props和emits的基础用法，以便更好地理解之前的解决方案。
首先，我需要回忆用户的历史问题。他们之前在一个
Vue组件中使用了
props接收父组件的配置，然后通过计算
属性的setter来触发emit，但发现修改下拉框时没有alert。后来通过使用watch或者拆分计算
属性解决了问题。现在他们可能想巩固基础，了解
props和emits在
Vue3中的正确使用方式。
用户可能的情况是，他们正在学习
Vue3，特别是组合式API，对父子组件之间的数据传递不太熟悉。之前的问题可能让他们意识到对
props和emits的理解不够深入，所以现在需要系统的讲解。
需要确保回答涵盖
props的定义、类型验证、默认值，以及emits的定义和用法。同时，结合组合式API的写法，比如使用define
Props和defineEmits。可能还需要提到v-model的双向绑定，因为他们在之前的代码中使用了update:config这种语法，属于自定义v-model的实现。
另外，用户可能对TypeScript有需求，因为他们的代码示例中用了TypeScript，所以回答中需要包含类型声明的部分，比如使用PropType和接口来定义
props的类型。
还需要注意，用户可能想知道如何在子组件中修改父组件传递的数据，但由于
Vue的单向数据流，直接修改
props是不允许的，所以必须通过emits来通知父组件修改，这可能也是他们之前遇到问题的原因之一。因此，在回答中要强调单向数据流的概念，以及如何通过emit来触发父组件的更新。
可能还需要给出一些示例代码，特别是使用setup语法糖的写法，因为用户之前的代码用了<script setup>。同时，对比选项式API和组合式API的不同写法，但用户用的是组合式，所以重点在后者。
最后，总结注意事项，比如
props只读、emits的事件命名规范，以及TypeScript中的类型校验，这些都是用户可能关心的点。此外，结合之前的例子，说明为什么直接修改对象
属性不会触发计算
属性的setter，而需要用emit，这样可以加强用户的理解。</think>以下是
Vue3 中 `
props` 和 `emits` 的核心用法详解：
---
### 一、`
props`（父传子）
#### 1. **基本定义**
```typescript
// 子组件中定义
props
const
props = define
Props({
title: {
type: String, // 类型校验
required: true, // 必传
default: "默认标题" // 默认值（非 required 时生效）
},
data: {
type: Object as PropType<{ id: number }>, // 复杂类型 + TS 类型标注
default: () => ({ id: 0 }) // 对象/数组的默认值需用函数返回
}
});
```
#### 2. **TS 增强写法**
```typescript
interface User {
name: string;
age: number;
}
define
Props<{
user: User; // 直接通过 TS 接口定义类型
disabled?: boolean; // 可选
属性
}>();
```
####
3. **使用
props**
```
vue
<template>
<div>{{ title }}</div>
<button :disabled="disabled">提交</button>
</template>
```
---
### 二、`emits`（子传父）
#### 1. **基本定义**
```typescript
// 子组件中定义 emits
const emit = defineEmits([
&#
39;update:title&#
39;, // 自定义事件名称
&#
39;submit&#
39; // 无参数事件
]);
// 更严谨的 TS 写法（定义事件参数类型）
const emit = defineEmits<{
(e: &#
39;update:title&#
39;, value: string): void;
(e: &#
39;submit&#
39;, payload: { id: number }): void;
}>();
```
#### 2. **触发事件**
```typescript
// 触发无参事件
const handleClick = () => {
emit(&#
39;submit&#
39;);
};
// 触发带参事件
const updateTitle = (newTitle: string) => {
emit(&#
39;update:title&#
39;, newTitle);
};
```
---
### 三、双向绑定 (`v-model`)
#### 1. **默认用法**
```
vue
<!-- 父组件 -->
<ChildComponent v-model="pageTitle" />
<!-- 子组件 -->
<script setup>
define
Props([&#
39;modelValue&#
39;]); // 默认接收名称为 modelValue
defineEmits([&#
39;update:modelValue&#
39;]); // 默认事件名
const updateValue = (newVal) => {
emit(&#
39;update:modelValue&#
39;, newVal);
};
</script>
```
#### 2. **自定义双向绑定**
```
vue
<!-- 父组件 -->
<ChildComponent v-model:title="pageTitle" />
<!-- 子组件 -->
<script setup>
define
Props([&#
39;title&#
39;]);
defineEmits([&#
39;update:title&#
39;]);
</script>
```
---
### 四、注意事项
1. **单向数据流**
- **禁止直接修改 `
props`**：必须通过 `emits` 通知父组件修改
- **需要派生数据时**：使用 `computed` 或 `watch` 处理
2. **TS 类型安全**
- 推荐使用 `interface` + `PropType` 明确类型
- 通过泛型约束 `defineEmits` 的事件参数
3. **性能优化**
- 避免在子组件中深度监听大对象（可用 `{ deep: true }`，但需谨慎）
- 对象类型的 `default` 必须用函数返回（避免共享引用）
---
### 五、完整示例
#### 父组件
```
vue
<template>
<Child
:user="userData"
@update:user="handleUpdate"
v-model:title="pageTitle"
/>
</template>
<script setup>
const userData = ref({ name: "John", age:
30 });
const pageTitle = ref("首页");
const handleUpdate = (newUser) => {
userData.value = newUser;
};
</script>
```
#### 子组件
```
vue
<template>
<input v-model="titleProxy" />
<button @click="updateUser">更新用户</button>
</template>
<script setup lang="ts">
interface User {
name: string;
age: number;
}
const
props = define
Props<{
user: User;
title: string;
}>();
const emit = defineEmits<{
(e: &#
39;update:user&#
39;, value: User): void;
(e: &#
39;update:title&#
39;, value: string): void;
}>();
// 通过计算
属性实现双向绑定
const titleProxy = computed({
get: () =>
props.title,
set: (val) => emit(&#
39;update:title&#
39;, val)
});
const updateUser = () => {
emit(&#
39;update:user&#
39;, { ...
props.user, age:
props.user.age + 1 });
};
</script>
```
---
### 六、核心总结
| 特性 | `
props` | `emits` |
|----------------|----------------------------------|----------------------------------|
| **数据流向** | 父 → 子 | 子 → 父 |
| **修改方式** | 只读，不可直接修改 | 通过触发事件通知父组件 |
| **类型校验** | 支持基本类型、自定义对象/TS 接口 | 可定义事件参数类型 |
| **双向绑定** | 需配合 `v-model` 语法糖 | 需定义 `update:*` 事件 |
通过合理组合 `
props` 和 `emits`，可以清晰管理组件间的数据流，同时保持代码的可维护性和类型安全。
扫一扫
502
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
