Nuxt 3中如何从其他组件触发状态变更？

针对你需要在ComponentB中关闭ComponentA弹窗的场景，Nuxt 3里不再推荐$root.$refs这类方式，以下是几种更贴合Vue 3/Nuxt 3生态的实用解决方案：

1. 父子组件通信（$emit） #

因为ComponentB是ComponentA的直接子组件，最直接的方式就是子组件触发事件通知父组件修改状态：

修改ComponentB.vue #

<template>
  <button type="button" @click="closeModal">Close</button>
</template>

<script setup>
// 定义要触发的事件
const emit = defineEmits(['close-modal'])

function closeModal() {
  emit('close-modal')
}
</script>

修改ComponentA.vue #

<template>
  <button @click="openModal">Open</button>
  <div appear :show="isOpen">
    <!-- 监听子组件触发的事件 -->
    <component-b @close-modal="isOpen = false" />
    test
  </div>
</template>

<script setup>
const isOpen = ref(false);

function openModal() {
  isOpen.value = true;
}
</script>

2. 使用Pinia全局状态管理 #

如果组件层级复杂，或者需要在多个组件中共享弹窗状态，可以用Nuxt 3内置的Pinia：

第一步：创建Pinia store #

在stores/modal.js中创建状态存储文件：

import { defineStore } from 'pinia'

export const useModalStore = defineStore('modal', {
  state: () => ({
    isOpen: false
  }),
  actions: {
    open() {
      this.isOpen = true
    },
    close() {
      this.isOpen = false
    }
  }
})

修改ComponentA.vue #

<template>
  <button @click="modalStore.open">Open</button>
  <div appear :show="modalStore.isOpen">
    <component-b />
    test
  </div>
</template>

<script setup>
import { useModalStore } from '~/stores/modal'
const modalStore = useModalStore()
</script>

修改ComponentB.vue #

<template>
  <button type="button" @click="modalStore.close">Close</button>
</template>

<script setup>
import { useModalStore } from '~/stores/modal'
const modalStore = useModalStore()
</script>

3. 使用Provide/Inject（适合深层嵌套组件） #

如果ComponentB嵌套在多层子组件中，用provide/inject可以跳过中间组件直接传递方法：

修改ComponentA.vue #

<template>
  <button @click="openModal">Open</button>
  <div appear :show="isOpen">
    <component-b />
    test
  </div>
</template>

<script setup>
const isOpen = ref(false);
const closeModal = () => {
  isOpen.value = false
}

// 向所有子组件提供关闭弹窗的方法
provide('closeModal', closeModal)

function openModal() {
  isOpen.value = true;
}
</script>

修改ComponentB.vue #

<template>
  <button type="button" @click="closeModal">Close</button>
</template>

<script setup>
// 注入父组件提供的关闭方法
const closeModal = inject('closeModal')
</script>

内容的提问来源于stack exchange，提问作者Aninto Yodha