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~