vue3单独重新渲染子组件

白白布凯西

已于 2023-11-16 09:47:24 修改

阅读量3.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： vue技术栈整理文章标签： vue.js 前端 javascript

于 2023-11-15 09:39:17 首次发布

本文链接：https://blog.csdn.net/byebukesi/article/details/134412930

vue技术栈整理专栏收录该内容

15 篇文章

订阅专栏

本文讲述了在Vue3中，当表单编辑完成后，如何在不刷新整个页面的情况下，仅重新渲染子组件以获取更新的值，介绍了使用key属性和flag变量两种方法，并推荐了key值改变的方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue3单独重新渲染子组件

我们经常在处理表单时，一般用弹窗类表单，不会存在此类问题，因为弹窗的打开关闭已经实现重新渲染弹窗组件。
但是如果表单和列表在同一页面，你希望在表单编辑完成保存后，单独刷新页面的下半部分详情组件，这时需要主动使子组件重新渲染，以便拿到更新后的值。

代码实现

<template>
  <div>
    <!-- 子组件，通过 key 属性控制重新渲染 -->
    <ChildComponent :key="refreshKey" />
    
    <!-- 一些按钮或其他交互，用于触发重新渲染 -->
    <button @click="refreshChildComponent">刷新子组件</button>
  </div>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  setup() {
    const refreshKey = ref(0);

    // 点击按钮时更新 key，触发子组件重新渲染
    const refreshChildComponent = () => {
      refreshKey.value += 1;
    };

    return {
      refreshKey,
      refreshChildComponent,
    };
  },
};
</script>

好处

如果不主动刷新子组件的话，子组件一般有很多改变状态的flag，每次保存需要手动把所有flag重置，会很麻烦。

其他方法

也可以通过主动设置一个flag绑定在子组件的v-if上，在需要刷新子组件的函数中，先将flag设置为false，然后加一个延时函数，零点几秒后将flag变回true，也可以实现子组件的重新加载（用nextTick也可以实现，原理一样）

<template>
  <div>
    <ChildComponent v-if="flag" />
  </div>
</template>

const flag = ref<boolean>(true)
const updateChild = () => {
  flag.value = false
  setTimeout(() => {
    flag.value = true
  }, 500)
}

推荐使用改变key值的方法，延时函数还是需要时间的