vue 在父组件中重置子组件 组件状态复原
有时候,需要一键复原组件的状态,这里提供三种方法,分别适用于不同的场景需求。第一种: v-ifv-if 简单,粗暴的直接控制着这个组件的dom是否重新渲染。<button @click="handleClick">refresh</button><child v-if="showFlag" />handleClick () { // 不断切换...
·
有时候,需要一键复原组件的状态,这里提供三种方法,分别适用于不同的场景需求。
第一种: 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~
更多推荐
已为社区贡献15条内容
所有评论(0)