vue 在父組件中重置子組件 組件狀態復原

有時候，需要一鍵復原組件的狀態，這裏提供三種方法，分別適用於不同的場景需求。

第一種： v-if

v-if 簡單，粗暴的直接控制着這個組件的dom是否重新渲染。

<button @click="handleClick">refresh</button>
<child v-if="showFlag" />

handleClick () { // 不斷切換 dom會反覆的重新渲染  自然也就達到了恢復初始狀態
    this.showFlag = !this.showFlag
}

第一種： key

組件加上key，其實原理上和v-if有些類似。我們知道key的作用是確保dom在diff的時候避免不必要的dom重新渲染，尤其是在循環的時候加上key爲了確保元素的唯一性，但是我們可以反其道而行之，給我們需要刷新的組件一個key，這裏提供一種場景，就是tab切換時的場景

<el-radio-group v-model="tab">
    <el-radio-button label="tab1"></el-radio-button>
    <el-radio-button label="tab2"></el-radio-button>
    <el-radio-button label="tab3"></el-radio-button>
</el-radio-group>
<child :key="id"/>

// 這裏也可以不用watch，也可以用 change 事件
watch: {

    tab (n, o) {

        if (n == 'tab1') {
            this.id = 1;
        } 
        // 下邊的情況就不寫了  else if 設置不同的id就可以達到目的了
    }
}

第二種： provide inject

這種方法，其實用的不多，一般在根組件設置一個標誌，同樣是通過v-if配合。這種方法如有興趣，可自行查詢，不在舉例，用的不太多。

end~