为什么我们只点击一次事件?
单击事件可以工作一次,然后不再工作。我创建了一个点击事件,它将打开一个模态组件,点击事件工作一次,然后停止。我使用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>
如果您在浏览器的开发控制台中没有看到错误,我会感到惊讶。这是在运行时出现错误的地方。应该看到的错误是:
[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
如上所述。