Vue the father passes on the son, the son changes the father

I have such a small requirement that the parent component passes a Boolean value variable to the child component as true,
child component receives this variable to change the value, and then the child component changes the value of the boolean variable to false
and returns it to the parent component. Is there any good way to do this?

parent.vue

<child :reset="reset" @value="valueHanlder"/>
<div @click="aaClick"></div>

export default {
    data() {
        return {
            reset: false,
        }
    },
    methods: {
        aaClick(){
            this.reset = true;
             //low  
            //setTimeout(()=>{
            //    this.reset = false
            // },300)
        },
        valueHanlder(val) {
            console.log(val);
        }
    }
}

child.vue

export default {
    props: {
        reset: {
            type: [Boolean],
            default: false,
        }
    }
    data() {
        return {
            value: 123,
        }
    },
    watch: {
        "reset": function(val){//()
            if(val) {
                this.value = "";
                this.$emit("value", "");
                //resetfalse??
            }
        }
    }
}
Mar.10,2021

.sync (2.3.0 +) syntax sugar, which extends to a v-on listener that updates the parent component binding value.


<MyComponent :isVisible.sync="isVisible" />


handleClose() {
   this.$emit('update:isVisible', false);
}

handleClose is where you want to change the isVisible, update the parent's isVisible

Menu