最近也遇到了如题问题,网上找了一下方案,主要有这几种:
1、通过vuex修改状态。
2、通过v-if重建组件。
3、给予随机值,实现数据更新。
试了以后,发现都不是很理想。这里说一下原因。
1、vuex太过于复杂了,需要变动多个状态。协调起来需要较多的代码来维护支持。
2、v-if绑定boolean实现销毁、重建组件,但实际运行过程中发现根本没有效果,组件并没有自动更新。
3、给予随机值,同样第一次更新数据不起作用,可能和数据联动滞后性有关。虽然用户第二次点击后可以正常更新,但肯定不能这么搞,用户还以为没数据了。
最后尝试了联动方法,即通过this.$emit方法,触发外部更新请求刷新的boolean即可解决了。附上关键代码:
//组件内
export default {
props: {
//是否需要刷新
needRef: Boolean
},
watch: {
needRef: function() {
if (this.needRef) {
this.$emit("ref-ok", true);
}else{
this.$emit("ref-ok", false);
}
}
}
}
//使用组件
// :need-ref=“needRef" 将刷新变量与使用组件代码内的data联动,这样只要修改needRef=true即可实现刷新
// @ref-ok=“refOK 是在组件内实现的ref-ok函数,刷新成功后激活告知是否成功更新,在实际环境中,组件内大部分是需要与服务器交互后才会反馈该信息的,这样确保了网络延迟联动 by fotomxq
<component-name :value=“id" :need-ref="needRef" @ref-ok=“refOK"></component-name>
//使用组件代码
export default {
data: function(){
return {
//是否刷新token
needRef: false,
};
},
methods: {
//这里注意一下,needref不能同时在组件修改,会造成竞争问题,一般vue调试工具会报错
//更新数据
Ref: function(){
//更新完成数据后,执行后面这句即可
this.needRef = true;
},
//刷新触发
refOK: function(result) {
if (result) {
this.needRef = false;
}
},
}
}
当然不能排除vuex或其他一些方法更简单,但我看了一下vuex的介绍,组件状态是全局环境下维护的,所以需要驻留状态来维护,未来研究一下看能否简化一下代码。
所有评论(0)