vue使用key实现组件刷新(渲染重置)笔记
关于这个问题,大佬们提供了很多种组件重置的方法,比如 v-for、key、以及this.$forceUpdate()等。
如这位大佬将 v-for和key的方法讲的很详细,额 我猜了一个原创链接:https://www.cnblogs.com/zyulike/p/12036456.html
参考原文(转载):https://blog.csdn.net/zyx1303031629/article/details/86656785
v-if 的方法类似于dom操作,如
v-if="flag === true"
or
v-if="flag === false"
this.flag = false;
this.$nextTick(() => {
this.flag = true
})
小编由于之前用过v-if的方法,所以这次试了试数据驱动的味道,即传说中的key方法。步骤如下:
<template>
<sa :ids="ids" :key="randerKey" />
</template>
其中:
ids是需要子组件渲染的内容
randerKey是,是什么呢,类似于timestemp吧,其实小编也没去搞搞清楚,只是用timestemp说服了自己。
watch:{
ids() {
++this.randerKey
}
},
这里在读大佬文章时开始没看明白,折腾了一会,所以特地做个笔记。所谓万般折腾只为卿。
watch在Vue官网文档中 计算属性-vs-侦听属性 是这个样子:
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性。当你有一些数据需要随着其它数据变动而变动时,你很容易滥用
watch
——特别是如果你之前使用过 AngularJS。然而,通常更好的做法是使用计算属性而不是命令式的watch
回调。细想一下这个例子:<div id="demo">{{ fullName }}</div>
var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } } })
这会了解了,原来在watch 的管辖范围,每个函数对应data区域的一个变量。
这里小编的做法未必是正确的,但代码跑的时候出了效果。
随便写了一个method,做了++操作。
methods: {
superMan() {
++this.randerKey;
}
}
貌似看到组件刷新了~