click event as props in Vue.js

问题

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

回答1:

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

来源：https://stackoverflow.com/questions/61866499/click-event-as-props-in-vue-js