vue3 子组件传值给父组件

基本思想：

1. 父组件中给子组件标签通过@绑定事件

2. 子组件内部通过$emit 方法触发事件

父组件，index.vue页面

<!-- 子组件传值给父组件 -->

<template>
    <div>
        <h1>父组件</h1>
        <ChildComponent @message-sent="handleMessage"/>
        <p>来自子组件的消息: {{ childMessage }}</p>
    </div>
</template>

<script setup>
import ChildComponent from './component/childComponent.vue'  //引入子组件
import { ref } from 'vue';

const childMessage = ref('');

const handleMessage = (message) => {
    childMessage.value = message;
}
</script>

<style scoped>
</style>

子组件 内容

<!-- childComponent.vue -->
<template>
    <div>
        <button @click="sendMessage">发送消息给子组件</button>
    </div>

</template>

<script setup>
import { defineEmits } from 'vue';
// 定义事件
const emit = defineEmits();

//方法触发事件
const sendMessage = () => {
    emit('message-sent', 'Hello from child component!');
}


</script>

<style scoped>

</style>

运行结果