Vue点击事件仅生效一次如何解决？打开模态框后无法再次触发

1. 子组件直接修改Props（核心问题） #

Modal组件中CloseIcon的点击事件直接修改了isModalActive这个props，违反了Vue单向数据流规则。子组件修改props后，父组件后续传递的新值会被覆盖，导致模态框无法再次打开。

修复后的Modal.vue代码：

<template>
  <div class="modal" v-if="isModalActive">
    <div class="modal-wrapper shadow-md rounded-sm">
      <CloseIcon
        class="absolute right-5 top-5 w-[30px] h-[30px] text-gray-500 hover:text-red-400 cursor-pointer"
        @click="close"
      />
      <div class="modal-body">
        <div class="modal-intraday-updates p-10">
          <slot></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CloseIcon from "./icons/CloseIcon.vue";

export default {
  name: "Modal",
  components: {
    CloseIcon,
  },
  props: {
    isModalActive: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    close() {
      this.$emit("close");
    },
  },
};
</script>

2. 父组件语法错误 #

Home.vue存在两处语法问题，导致事件触发异常：

• 事件指令拼写错误：@click.prenvet应为@click.prevent（若无需阻止默认行为，直接写@click即可）
• 标签闭合错误：<span>标签错误用</div>闭合，需改为</span>
• 遗漏ref导入（若项目未开启自动导入）

修复后的Home.vue代码：

<template>
  <Modal :isModalActive="isModalActive" @close="isModalActive = false">
    <div>Modal Content</div>
  </Modal>
  <span @click="isModalActive = true" class="cursor-pointer">OPEN MODAL</span>
</template>

<script setup>
import Modal from "../components/Modal.vue";
import { ref } from 'vue';

const isModalActive = ref(false);
</script>

关键说明 #

Vue中props是单向绑定，子组件绝对不能直接修改props，必须通过$emit通知父组件修改数据源，这样才能保证状态同步的一致性。模态框的显示/隐藏状态完全由父组件的isModalActive变量控制，子组件仅负责接收状态和触发关闭事件。

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