如何在父组件中强制刷新子组件

一、父组件中,局部视图更新,需要内子组件初始化更新

在业务场景中,先点击首页待办任务分页的第二页,然后已提交任务,这时候表格视图正常已经渲染,但是分页数字仍然显示在2,按正常逻辑,页码应该在1才符合。

1.1 思路一:在点击 已提交任务 时候,把分页组件的当前current值修改为1.

尝试,得知:在第一次首页渲染完成之后,点击待办任务或者已提交任务,只有表格视图的局部重新渲染,而分页组件不会再次渲染,故传值无法实现。

1.2 思路二: 在点击事件发生同时,强制把分页组件初始化刷新,v-if

// 原理就是:采用v-if会销毁组件并且重绘,这样就会重载组件
 <Pagination v-if="hackReset == true" />
// 然后在父组件内的增删改查方法中操作,就好了
<script>
method:{
  forceUpdate(){
    this.hackReset  = false
   // $nextTick 是在下次 DOM 更新完成后,在执行里面的函数,类似于回调
    this.$nextTick(() => {
      this.hackReset = true;
    });
  }
}
</script>

1.3 使用this.$forceUpdate强制重新渲染

如果要在组件内部中进行强制刷新,则可以调用this.$forceUpdate()强制重新渲染组件,从而达到更新目的。

<template>
<button @click="reload()">刷新当前组件</button>
</template>
<script>
export default {
    name: 'comp',
    methods: {
        reload() {
            this.$forceUpdate()
        }
    }
}
</script>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,148评论 1 32
  • 作为一个合格的开发者,不要只满足于编写了可以运行的代码。而要了解代码背后的工作原理;不要只满足于自己的程序...
    六个周阅读 8,529评论 1 33
  • 我是一个好了伤疤忘了疼的人,我一直这么认为。 遗忘是一件很可怕的事,那些伤害那些折磨,我反反复复不能入睡,不断在日...
    手鼓君阅读 196评论 0 0
  • 七年是一个轮回 早先的细胞都已作废 闲来身上不再爬满怨怼 可依旧没有把握 若再见你是否可以 自持不流泪 有时愿你我...
    Serena_02fc阅读 309评论 0 0
  • 近几年来,各种区块链及其应用不断开疆拓土,向更广的领域和更深的应用发展。比特币、以太币等各种公有链和数字货币不断涌...
    简丹財经阅读 2,332评论 4 3