vue父传子,子改变父？

Question

我有个这样的小需求，父组件传给子组件一个boolean值变量为true，
子组件接收到这个变量去改变值，然后子组件再把这个boolean变量值改false
传回给父组件,这个有什么好的办法？

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', '');
                //这里处理完以后我怎样把外面父级的reset又变为false??
            }
        }
    }
}

Answer 1

.sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

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

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

handleClose就是你要改变isVisible的地方，更新父的isVisible