nuxt3 父子组件通信有哪些方式

在 Nuxt 3 中，父子组件之间的通信方式和 Vue 3 是一样的。父子组件通信的方式主要有以下几种：

1. 使用 Props 和 Events（父子组件）

这是 Vue 的基本通信方式，适用于父组件向子组件传递数据，或者子组件向父组件发送消息。

父组件传递数据给子组件 (Props)

父组件通过 props 向子组件传递数据。

<!-- 父组件 Parent.vue -->
<template>
  <Child :message="parentMessage" />
</template>

<script setup>
import Child from './Child.vue'

const parentMessage = 'Hello from Parent!'
</script>

<!-- 子组件 Child.vue -->
<template>
  <p>{{ message }}</p>
</template>

<script setup>
defineProps({
  message: String
})
</script>

子组件向父组件传递事件 (Events)

子组件通过 $emit 触发事件，父组件监听该事件并处理数据。

<!-- 父组件 Parent.vue -->
<template>
  <Child @sendMessage="handleMessage" />
</template>

<script setup>
import Child from './Child.vue'

const handleMessage = (message) => {
  console.log('Received message from child:', message)
}
</script>

<!-- 子组件 Child.vue -->
<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script setup>
const emit = defineEmits()

const sendMessage = () => {
  emit('sendMessage', 'Hello from Child!')
}
</script>

2. 使用 provide 和 inject（跨层级组件通信）

provide 和 inject 是 Vue 3 中用于父子组件（或跨层级）通信的 API。在 Nuxt 3 中，provide 可以在父组件或插件中提供数据，子组件通过 inject 来注入这些数据。

父组件提供数据（provide）

<!-- 父组件 Parent.vue -->
<script setup>
import { provide } from 'vue'

const parentData = 'Data from Parent'

provide('parentData', parentData)
</script>

子组件注入数据（inject）

<!-- 子组件 Child.vue -->
<script setup>
import { inject } from 'vue'

const parentData = inject('parentData')
console.log(parentData) // 输出: Data from Parent
</script>

这种方法适用于跨层级组件的通信，不仅限于父子组件之间。它通常用于插件或者更深层次的组件之间的状态共享。

3. 使用 ref 和 defineExpose（父子组件通信）

在 Nuxt 3 和 Vue 3 中，你可以通过 ref 和 defineExpose 来让子组件暴露出一些方法或属性，父组件可以通过 ref 来访问这些方法或属性。

父组件通过 ref 获取子组件的方法

<!-- 父组件 Parent.vue -->
<template>
  <Child ref="childRef" />
  <button @click="callChildMethod">Call Child Method</button>
</template>

<script setup>
import { ref } from 'vue'
import Child from './Child.vue'

const childRef = ref(null)

const callChildMethod = () => {
  childRef.value.sayHello() // 调用子组件的方法
}
</script>

子组件暴露方法

<!-- 子组件 Child.vue -->
<script setup>
defineExpose({
  sayHello: () => {
    console.log('Hello from Child!')
  }
})
</script>

4. 使用 Vuex 或 Pinia（全局状态管理）

当父子组件通信需要跨越多层级，或者多个组件需要共享状态时，使用 Pinia 或 Vuex（在 Nuxt 3 中推荐使用 Pinia）来进行全局状态管理。

在 Pinia 中共享状态

1. 创建 Pinia store

// stores/user.ts
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    name: 'John Doe',
    age: 30
  }),
  actions: {
    updateName(newName: string) {
      this.name = newName
    }
  }
})

2. 在父组件中使用

<script setup>
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
</script>

<template>
  <div>{{ userStore.name }}</div>
</template>

3. 在子组件中使用

<script setup>
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
</script>

<template>
  <button @click="userStore.updateName('Jane Doe')">Change Name</button>
</template>

通过 Pinia 管理的状态可以在应用中的任意位置访问和修改，适合全局共享的状态。

5. 使用 Event Bus（不推荐）

事件总线（Event Bus）是一种通过在不同组件之间触发自定义事件来进行通信的方式，通常我们会使用 mitt 这样的库来实现。在 Vue 3 和 Nuxt 3 中，不推荐使用这种方法，因为它不够结构化，容易导致难以维护的代码。

// 创建一个 Event Bus
import mitt from 'mitt'

const emitter = mitt()

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.provide('emitter', emitter)
})

然后在组件中使用：

<!-- 发送事件 -->
<script setup>
const emitter = useNuxtApp().$emitter

const sendMessage = () => {
  emitter.emit('message', 'Hello from Child')
}
</script>

<!-- 接收事件 -->
<script setup>
const emitter = useNuxtApp().$emitter

onMounted(() => {
  emitter.on('message', (msg) => {
    console.log(msg) // 输出: Hello from Child
  })
})
</script>

虽然这种方法也能实现组件间的通信，但不如 props 和 events、provide/inject、Pinia 等方式结构化，因此不推荐在大多数情况下使用。

总结

在 Nuxt 3 中，父子组件之间的通信方式主要有以下几种：

1. Props 和 Events：最常用的父子组件通信方式，适用于大多数简单的组件间传递。
2. provide 和 inject：适用于跨层级组件之间的通信，尤其是需要在深层组件树中共享数据或方法时。
3. ref 和 defineExpose：通过暴露和访问子组件方法进行通信，适用于父组件直接控制子组件的场景。
4. Pinia（或 Vuex）：全局状态管理，用于跨多个组件共享和管理状态。
5. Event Bus：虽然可以使用，但不推荐在 Nuxt 3 中使用，尤其是大型项目中，容易导致维护困难。

如果你有特定的通信场景或问题，欢迎进一步提问！