为什么点击事件只工作一次?单击事件工作一次，不再工作

Question

为什么我们只点击一次事件?

单击事件可以工作一次，然后不再工作。我创建了一个点击事件，它将打开一个模态组件，点击事件工作一次，然后停止。我使用Tailwind作为第三方库

Modal.vue

<template>
<div class="modal" v-if="isModalActive == true">
<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="isModalActive = false"
/>
<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: true,
},
},
methods: {
close() {
this.$emit("close");
},
},
};
</script>

Home.vue

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

<script setup>
import Modal from "../components/Modal.vue";
const isModalActive = ref(false);
const openModal = () => {
isModalActive.value = true;
};
</setup>

Answer 1

如果您在浏览器的开发控制台中没有看到错误，我会感到惊讶。这是在运行时出现错误的地方。应该看到的错误是:

[Vue warn]:避免直接改变prop，因为当父组件重新渲染时，该值将被覆盖。相反，使用基于道具值的data或computed属性。正在被改变的道具:"isModalActive">

我知道这是因为我运行了你的代码(修复一些拼写错误/语法错误后)

错误告诉我们哪里出了问题。Props应该只用于单向数据流，这意味着一旦组件接收到一个Props，它应该而不是尝试更改道具的值。

<CloseIcon
class="absolute right-5 top-5 w-[30px] h-[30px] text-gray-500 hover:text-red-400 cursor-pointer"
@click="isModalActive = false"
/>

isModalActive在这里被设置为false而发生了突变。这导致了你的错误。为了防止这种错误，让父组件(Home.vue)为您改变prop。在您的示例中，实际上已经有了用于此操作的大部分代码。只需将点击事件更改为:

@click="close"

将调用您的close方法:

close() {
this.$emit("close");
},

此方法发出事件"close"你的父组件会捕获，事实上你已经让你的父组件这样做了:

<Modal :isModalActive="isModalActive" @close="isModalActive = false">

所以对于你的问题，你只需要改变你的@click如上所述。