关于vue子组件刷新问题

2019独角兽企业重金招聘Python工程师标准>>>

最近也遇到了如题问题，网上找了一下方案，主要有这几种：

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的介绍，组件状态是全局环境下维护的，所以需要驻留状态来维护，未来研究一下看能否简化一下代码。

转载于:https://my.oschina.net/fotomxq/blog/2906982