给出vue3父子组件传值的案例

好的，以下是一个简单的vue3父子组件传值的案例：

父组件：

<template>
  <div>
    <h1>父组件</h1>
    <p>子组件传来的消息：{{ message }}</p>
    <ChildComponent @messageChange="getMessage"></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent.vue";

export default {
  name: "ParentComponent",
  components: {
    ChildComponent,
  },
  data() {
    return {
      message: "",
    };
  },
  methods: {
    getMessage(message) {
      this.message = message;
    },
  },
};
</script>

子组件：

<template>
  <div>
    <h2>子组件</h2>
    <input type="text" v-model="inputMessage" />
    <button @click="sendMessage">传递消息</button>
  </div>
</template>

<script>
export default {
  name: "ChildComponent",
  data() {
    return {
      inputMessage: "",
    };
  },
  methods: {
    sendMessage() {
      this.$emit("messageChange", this.inputMessage);
    },
  },
};
</script>

在这个案例中，子组件通过`$emit()`方法将消息传递给父组件，父组件监听子组件的`messageChange`事件，并在回调函数中接收子组件传来的消息，将其保存在自身的`message`属性中。通过这种方式，实现了vue3父子组件之间的值传递。