鍍金池/ 問(wèn)答/HTML/ vue父?jìng)髯?子改變父

vue父?jìng)髯?子改變父

我有個(gè)這樣的小需求,父組件傳給子組件一個(gè)boolean值變量為true,
子組件接收到這個(gè)變量去改變值,然后子組件再把這個(gè)boolean變量值改false
傳回給父組件,這個(gè)有什么好的辦法?

parent.vue

<child :reset="reset" @value="valueHanlder"/>
<div @click="aaClick">父?jìng)髯?lt;/div>

export default {
    data() {
        return {
            reset: false,
        }
    },
    methods: {
        aaClick(){
            this.reset = true;
             //本來(lái)想在這里加個(gè)定時(shí)器的,覺(jué)得太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){//這里監(jiān)聽(tīng)父?jìng)鬟^(guò)來(lái)的內(nèi)容(不知道這樣方式好不好,還是說(shuō)有更好的辦法)
            if(val) {
                this.value = '';
                this.$emit('value', '');
                //這里處理完以后我怎樣把外面父級(jí)的reset又變?yōu)閒alse??
            }
        }
    }
}
回答
編輯回答
舊酒館

.sync (2.3.0+) 語(yǔ)法糖,會(huì)擴(kuò)展成一個(gè)更新父組件綁定值的 v-on 偵聽(tīng)器。

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

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

handleClose就是你要改變isVisible的地方,更新父的isVisible

2017年2月5日 05:23