nuxt 3 觸發來自其他組件的更改

Question

我有一個關於在 nuxt 3 中觸發其他組件的問題。在 nuxt 2 中我可以使用 $root.$refs 來觸發組件，但是 nuxt 3 呢？

示例：在 componentA 中，我有一個觸發彈出窗口的按鈕

<template>
  <button @click="openModal">Open</button>
  <div appear :show="isOpen">
    <component-b />
    test
  </div>
</template>
<script setup>
const isOpen = ref(false);

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

在 componentB.vue 中，我在 componentA 中有一個用於彈出窗口的關閉按鈕

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

我的目標是當單擊組件 B 的按鈕時，它可以觸發組件 A 的彈出窗口關閉。

Answer 1

您可以使用 emit 來執行此操作。

在您的組件 B 中，定義一個 emit，例如：

// Component B
<template>
  <button type="button" @click="emit('close')">Close</button>
</template>

<script setup lang="ts">
const emit = defineEmits(['close'])
</script>

您可以使用組件 A 中的這個 emit 來關閉模式。

// Component A
<template>
  <button @click="openModal">Open</button>
  <div appear :show="isOpen">
    <component-b @close="isOpen = false" />
    test
  </div>
</template>
<script setup>
const isOpen = ref(false);

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