我使用Vue.js创建了一个动态叠加层组件来处理close事件,当我们在屏幕上远离预期对象单击时,该对象关闭了我的问题,在这里click事件不起作用,这是我的代码
<template>
<button
v-if="action"
@click="clicked"
tabindex="-1"
class="fixed z-40 w-full h-full inset-0 bg-black opacity-50 cursor-default"
></button>
</template>
<script>
export default {
name: "Overlay",
props: {
action: Boolean,
},
methods: {
clicked() {
if (this.action === true) {
return false
}
}
}
};
</script
答案 0 :(得分:0)
通常,您不允许更新传递给组件的属性。 正确的方法应该是让您从点击的位置发出点击,例如:
clicked() {
this.$emit("clicked");
}
然后,当您使用叠加层组件时,例如:
<overlay @clicked="doSomethingHere"></overlay>
您可以在组件外部更改切换变量,但应在组件内部使用data() { action: false }
而不是尝试更新属性。
最后,您可以在此处了解有关属性的更多信息:https://vuejs.org/v2/guide/components-props.html