vue3向父组件传递数据

实现方式
在 Vue 3.x 中，子组件向父组件传递数据主要依赖于 $emit 方法来触发自定义事件。这种方式允许子组件通知其父组件发生了某些特定的行为或状态变化，并可以附带额外的信息作为参数。
使用 $emit 发送消息
当某个动作发生在子组件内部时——比如按钮点击、输入框内容更改或者其他交互行为发生之后，可以通过调用 this.$emit('eventName', payload) 来发射一个名为 eventName 的事件给父级组件，其中 payload 是要发送的数据对象或者简单类型的变量[^1]。
父组件监听并处理来自子组件的消息
为了让父组件能够接收到这些由子组件发出的通知，在模板里绑定相应的处理器到子组件实例上即可：
<template>
<div class="parent">
<!-- 绑定 child-event 到 handleChildEvent 处理器 -->
<child-component @child-event="handleChildEvent"></child-component>

<p>Received Message: {{ receivedMessage }}</p>
</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ChildComponent from './components/ChildComponent.vue';

const receivedMessage = ref('');

// 定义接收方法
function handleChildEvent(message) {
console.log(`From child component: ${message}`);
receivedMessage.value = message;
}
</script>
登录后复制
这段代码展示了如何设置一个简单的父子组件间通讯机制。每当 <child-component> 调用了它的 $emit() 函数并向外广播了一个叫做 "child-event" 的新事件后，上面例子中的 handleChildEvent 将会被自动执行并将传来的信息存储起来显示出来[^4]。
子组件内触发事件的例子
下面是一个具体的子组件示例 (ChildComponent.vue) ，它会在用户按下按钮的时候通过 emit 向外部报告一条消息:
<!-- ChildComponent.vue -->
<template>
<button type="button" @click="sendMessage">Send Message to Parent</button>
</template>

<script setup lang="ts">
function sendMessage() {
const msg = 'Hello, I am a message from the child!';

// Emitting an event named 'child-event' with some data.
this.$emit('child-event', msg);
}
</script>
登录后复制
在这个例子中，一旦用户点击了按钮，则会触发 sendMessage 方法并通过 $emit 把字符串形式的消息发出去。这个过程不需要关心谁订阅了该事件；只需要知道任何监听者都会得到这条消息副本[^5]。