vue3实现父子组件相互传值

在 Vue3 中，可以使用 `props` 和 `emit` 来实现父子组件之间的数据传递。

父组件可以通过 `props` 向子组件传递数据，而子组件可以通过 `$emit` 方法向父组件发送事件，并传递数据。

以下是一个简单的例子：

<!-- 父组件 -->
<template>
  <div>
    <ChildComponent :message="message" @update-message="updateMessage" />
    <p>父组件接收到的消息：{{ message }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  },
  components: {
    ChildComponent
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>子组件接收到的消息：{{ message }}</p>
    <button @click="sendMessage">发送消息到父组件</button>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: ''
    }
  },
  methods: {
    sendMessage() {
      this.$emit('update-message', 'Hello, Vue3!')
    }
  }
}
</script>

在上面的例子中，父组件向子组件传递了 `message` 属性，子组件可以通过 `props` 接收这个属性并渲染到页面上。同时，子组件中的 `sendMessage` 方法通过 `$emit` 向父组件发送了一个名为 `update-message` 的事件，并传递了一个新的消息内容。父组件中的 `updateMessage` 方法接收到这个事件并更新了 `message` 属性的值，从而实现了父子组件之间的数据传递。