Question

我使用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

Answer 1

通常，您不允许更新传递给组件的属性。正确的方法应该是让您从点击的位置发出点击，例如：

clicked() {
      this.$emit("clicked");
}

然后，当您使用叠加层组件时，例如：

<overlay @clicked="doSomethingHere"></overlay>

您可以在组件外部更改切换变量，但应在组件内部使用data() { action: false }而不是尝试更新属性。

最后，您可以在此处了解有关属性的更多信息：https://vuejs.org/v2/guide/components-props.html

点击事件作为Vue.js中的道具

1 个答案: