0

我在父组件中有两个子组件（CModal1和CModal2），它们都是ModalWrapper组件中的包装器。这个包装器组件为每个模式提供了一个过渡效果和一个关闭事件（一个 X 按钮和一个都发出close事件的背景）。现在，如果单击最外层的 ( Modal2 )close按钮，它也会关闭Modal1。这是因为这两个@close事件都会触发吗？

我该如何补救？我应该将Modal2的包装器放在实际组件中，而不是将其包装在父组件中吗？

如果我没有正确解释事情，或者您需要更多代码/上下文，请告诉我。

干杯!

父组件

<template>
  <ModalWrapper
    @close="modal1Open = false"
    :isVisible="modal1IsVisible"
  >
    <CModal1
      v-if="modal1IsVisible"
      :formData="formData"
      @close="modal1IsVisible = false"
      @save-data="(val) => saveData(val)"
      @open-modal-2-clicked="modal2Open = true"
    />
  </ModalWrapper>
  <ModalWrapper
    @close="modal2Open = false"
    :isVisible="modal2Open"
    class="z-30"
  >
    <CModal2
      v-if="modal2IsVisible"
      @close="modal2IsVisible = false"
    />
  </ModalWrapper>
</template>
4

0 回答 0