子组件的动态刷新问题

image.png

我们经常会遇到的需求就是在主页面中查询数据，单击按钮进入到子组件进行筛选条件的选择，就需要我们对子组件的刷新问题进行动态控制

• 切换记录和统计的时候，子组件进行更新
• 当不切换时，子组件不更新，保留筛选的值
  以上两点就要求子组件根据情况进行刷新

1.比较简单粗暴的方式强制刷新

  <updata-follow v-if='moduleSelectShow'
                          :showPanel='showPanel'
                       @cancel="moduleSelectCancel"
                       @save="moduleSave">
        </updata-follow>
在data中设置moduleSelectShow为false
然后点击筛选时组件每次进入都会重新加载，但是不满足条件

采用传参的形式，当页面切换时传给子组件一个flag当flag为true时刷新页面，但是这种情况，只能操作一次，因为子组件中flag开始为false当组页面传值为true时，页面刷新一次，这次之后子组件中的flag就为true了，展示未想到办法解决如何在子组件中把flag从新置为false，所以此种方法不可取。

采用store的方式进行处理，不再纠结子组件的刷新问题，而是直接调用重置方法

父组件中页面进行切换时
this.$store.dispatch('common/setCount')
子组件的计算属性中监测count
computed: { clearFlag () { // 显示添加按钮 return this.$store.getters.count } }
监听flag若值发生变化就重置选项
watch: { clearFlag (newValue, oldValue) { this.reset() } }