子组件的动态刷新问题
2019-05-10 本文已影响0人
追风筝的Hassan
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() } }