vue 子组件强制重新刷新重新渲染数据

Vue子组件重建技巧

最新推荐文章于 2024-12-26 01:48:38 发布

原创最新推荐文章于 2024-12-26 01:48:38 发布 · 8.4k 阅读

6 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种在Vue中通过设置hackReset值来控制子组件重建的方法。具体步骤包括：定义子组件的v-if指令与hackReset变量，利用hackReset的布尔值控制组件的显示与隐藏，以及使用$nextTick实现组件的重新渲染。

1. 定义子标签并通过 v-if hackReset 值(true | fasle) 控制子标签的重建
    <living-card v-if="hackReset"></living-card>

2. 定义hackReset初始值 true 保证初始化子标签正常显示
    data() {
       return {
         hackReset: true,
       }
    }

3.调用方法使子标签销毁并重建
   rebuileComponents() {
      // 销毁子标签
      this.hackReset = false;
      // 重新创建子标签
      this.$nextTick(() => {
        this.hackReset = true;
      });
    },