vue.js nuxt 3触发其他组件的更改

jexiocij 于 2023-01-17 发布在 Vue.js

关注(0)|答案(1)|浏览(790)

我有一个关于在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中的弹出窗口关闭。

vue.js

来源：https://stackoverflow.com/questions/75126137/nuxt-3-triggers-changes-from-other-components

1条答案

按热度按时间

cwtwac6a1#

您可以使用发射器来执行此操作。
在组件B中，定义如下发射：

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

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

您可以使用组件A的发射来关闭模态。

// 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>

赞(0）回复(0）举报 2023-01-17

我来回答

vue.js nuxt 3触发其他组件的更改

1条答案

相关问题

热门标签

最新问答