单击事件作为 Vue.js 中的 props

我用 Vue.js 创建了一个动态覆盖组件来处理关闭事件，当我们在远离预期对象的屏幕上单击时，该对象会关闭我的问题，这里单击事件不起作用，这是我的代码

<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

通常不允许您更新传递给组件的属性。 正确的方法应该是从使用它的地方发出点击，如下所示：

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

然后当您使用覆盖组件时，例如：

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

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

最后，您可以在这里阅读有关属性的更多信息：https://v2.vuejs.org/v2/guide/components-props.html https://v2.vuejs.org/v2/guide/components-props.html