点击事件作为 Vue.js 中的道具 [英] click event as props in Vue.js

问题描述

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

<预><代码><模板><按钮v-if="动作"@click="点击"tabindex="-1"class="fixed z-40 w-full h-full inset-0 bg-black opacity-50 cursor-default"></按钮><脚本>导出默认{name: "叠加",道具: {动作:布尔值，},方法: {点击(){如果(this.action === true){返回假}}}};</脚本

解决方案

通常不允许更新传递给组件的属性.正确的方法应该是让您从使用它的地方发出点击:

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

然后当您使用叠加组件时:

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

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

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

I created a dynamic overlay component with Vue.js to handle the close event, when we click on the screen away from the intended object the object closes my problem here the click event does not work here's my code

<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

解决方案

Usually you are not allowed to update properties passed to the component. The proper way should be for you to emit the click from where it is used like:

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

Then when you use the overlay component like:

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

You can alter your toggle variable outside of the component, but within the component you should use data() { action: false } instead of attempting to update properties.

Finally you can read more about properties here: https://vuejs.org/v2/guide/components-props.html

这篇关于点击事件作为 Vue.js 中的道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！