vue3 子组件给父组件传值，并且在父组件中使用

1、在子组件中触发事件： 子组件可以通过$emit方法触发一个自定义事件，并将需要传递的数据作为参数传递给父组件。

<template>
  <button @click="sendMessage">Send Message to Parent</button>
</template>

<script setup>
import { defineEmits } from 'vue';

const emits = defineEmits(['message']);

const sendMessage = () => {
  const message = 'Hello from child!';
  emits('message', message);
};
</script>

2、在父组件中接收事件： 父组件通过在子组件标签上监听子组件触发的自定义事件，并在事件处理程序中处理传递过来的数据。

<template>
  <div>
    <ChildComponent @message="receiveMessage" />
    <p>Received message from child: {{ receivedMessage }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const receivedMessage = ref('');

const receiveMessage = (message) => {
  receivedMessage.value = message;
};
</script>

子组件通过$emit方法触发了一个名为message的自定义事件，并将消息作为参数传递给父组件。父组件监听了这个事件，并在事件处理程序中将接收到的消息赋值给一个变量，然后在模板中显示出来。