在Vue3中，父子组件之间的通信方式相比Vue2有所改变，更加简洁且高效。本文将详细探讨Vue3中如何使用`setup`语法糖格式来实现父子组件的数据传递，包括`defineProps`和`defineEmits`这两个关键函数的用法。
### 1. `defineProps`: 接收父组件传递的数据
在Vue3中，父组件向子组件传递数据主要是通过props进行的。在`setup`函数中，我们可以使用`defineProps`来定义子组件可以接受的props类型和结构。这是一个静态方法，它返回一个对象，对象的属性名对应props的名称，属性值定义了对应的类型或默认值。例如：
```javascript
import { defineProps } from 'vue';
export default {
setup(props, context) {
const definedProps = defineProps({
message: String, // 字符串类型
count: {
type: Number, // 数字类型
default: 0 // 默认值为0
}
});
// 使用props中的数据
console.log(definedProps.message, definedProps.count);
// ...
}
}
```
在这个例子中，`message`必须是字符串类型，而`count`则是数字类型，如果没有提供，默认值为0。
### 2. `defineEmits`: 抛出父组件将响应的方法
子组件向父组件传递数据或事件通常通过触发自定义事件完成。在Vue3中，我们使用`defineEmits`来定义子组件可以发出的事件及事件参数。同样，它返回一个对象，对象的属性名是事件名称，属性值可以是函数，用于验证事件触发时的参数。例如：
```javascript
import { defineEmits } from 'vue';
export default {
setup(props, context) {
const definedEmits = defineEmits({
'increment': (amount: number) => { // 事件名为increment，参数为number类型
return amount > 0; // 只有当amount大于0时，事件才有效
},
'custom-event': () => true // 自定义事件custom-event，没有参数验证
});
const handleClick = () => {
if (definedEmits('increment', 1)) { // 如果事件有效，则触发
context.emit('increment', 1);
}
};
// ...
}
}
```
在这个例子中，子组件有一个`handleClick`方法，当调用`context.emit('increment', 1)`时，会触发一个`increment`事件，只有当传入的`amount`大于0时，事件才会被父组件接收到。
### 3. 父组件与子组件的交互
**父组件（parent.vue）**:
```html
<template>
<ChildComponent :message="msg" @increment="handleIncrement"></ChildComponent>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
msg: 'Hello from Parent'
};
},
methods: {
handleIncrement(amount) {
console.log('Parent received increment event:', amount);
this.msg += ' Incremented!';
}
}
};
</script>
```
在父组件中，`message`属性绑定了`msg`变量，通过`@increment`监听子组件的`increment`事件，并定义了一个`handleIncrement`方法来处理这个事件。
**子组件（child.vue）**:
```html
<template>
<div>
<p>{{ message }}</p>
<button @click="handleClick">Increment</button>
</div>
</template>
<script>
import { defineProps, defineEmits, ref } from 'vue';
export default {
props: {
message: String
},
setup(props, context) {
const definedEmits = defineEmits({
'increment': (amount) => amount > 0
});
const handleClick = () => {
definedEmits('increment', 1);
};
return {
handleClick
};
}
};
</script>
```
子组件接收`message`属性，并定义了一个`handleClick`方法来触发`increment`事件。
通过这种方式，Vue3实现了父子组件之间的数据传递和事件通信，简化了代码并提高了可读性。在实际开发中，开发者可以根据具体需求灵活运用`defineProps`和`defineEmits`，以实现更高效的组件间通信。
