vue3+ts component子传父
时间: 2025-02-11 14:02:14 AIGC 浏览: 47
### 实现子组件向父组件传递数据
在 Vue 3 和 TypeScript 中,`defineEmits` 是用于定义自定义事件的关键工具之一。这使得子组件能够触发带有有效载荷的事件,而父组件可以通过监听这些事件接收来自子组件的信息。
#### 使用 `defineEmits`
为了使子组件能通知其父级发生了什么变化或需要采取的动作,可以在子组件内部调用由 `defineEmits` 定义的方法来发射特定名称的事件。父组件则负责监听该事件并作出响应[^2]。
```typescript
// 子组件 ChildComponent.vue
<script setup lang="ts">
import { defineEmits } from 'vue'
interface EmitEvents {
(e: 'updateMessage', message: string): void;
}
const emit = defineEmits<EmitEvents>();
function sendMessageToParent() {
const newMessage = "这是从子组件发出的消息";
emit('updateMessage', newMessage);
}
</script>
<template>
<button @click="sendMessageToParent">点击发送消息给父组件</button>
</template>
```
在此示例中,当按钮被点击时会执行 `sendMessageToParent()` 函数,它将创建一条新消息并通过 `emit` 方法将其作为参数传递给名为 `'updateMessage'` 的事件。
#### 父组件处理子组件事件
为了让父组件接收到这条信息,在模板里绑定对应的处理器即可:
```html
<!-- ParentComponent.vue -->
<ChildComponent @updateMessage="(msg) => receivedMessage = msg" />
<p>接收到的消息:{{ receivedMessage }}</p>
```
这里假设有一个叫做 `receivedMessage` 的变量用来存储最新接收到的内容。每当子组件触发了 `updateMessage` 事件之后,这个回调函数就会被执行并将传入的新值赋给 `receivedMessage` 变量。
通过这种方式,实现了双向沟通机制——即不仅可以从上至下地传输属性(props),也可以反过来让子元素告知上级有关自身的状态改变或其他重要事项。
阅读全文
相关推荐



















