Nuxt3实现父子组件通信

在Nuxt3中，你可以使用Vue.js提供的props和$emit来实现父子组件通信。具体步骤如下：
1. 在父组件中使用props向子组件传递数据。
2. 在子组件中使用$emit触发一个自定义事件，并将数据作为参数传递给父组件。
3. 在父组件中监听子组件触发的自定义事件，并在事件处理函数中更新父组件的数据。

下面是一个简单的例子，演示了如何在Nuxt3中实现父子组件通信：

<!-- Parent.vue -->
<template>
  <div>
    <Child :message="message" @update-message="updateMessage" />
    <p>Message from child: {{ message }}</p>
  </div>
</template>

<script>
import Child from '~/components/Child.vue'

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

<!-- Child.vue -->
<template>
  <div>
    <p>Message from parent: {{ message }}</p>
    <button @click="sendMessage">Send message to parent</button>
  </div>
</template>

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

在这个例子中，父组件向子组件传递了一个名为message的prop，子组件通过$emit触发了一个名为update-message的自定义事件，并将新的消息作为参数传递给父组件。父组件监听了这个自定义事件，并在事件处理函数中更新了自己的message数据。