Vue 刷新组件

参考

强制 Vue 组件重新渲染的方法(一) - 掘金 (juejin.cn)

强制 Vue 组件重新渲染的方法(二) - 掘金 (juejin.cn)

环境搭建

创建组件model_a,模拟要刷新的组件,每当重新加载时,都会在控制台输出提示

xml 复制代码
<script setup>
import { onMounted } from 'vue'
onMounted(()=>{
  console.log("加载组件")
})
</script>

<template>
  <div>
    this is a
  </div>
</template>

<style scoped>
</style>

每当点击按钮时,都会去刷新组件

xml 复制代码
<script setup>
import { ref,nextTick } from 'vue'
import model_a from "./model_a.vue"
</script>

<template>
  <model_a></model_a>
  <button style="border: 1px solid #ccc;" @click="refresh">
      refresh
    </button>
</template>

<style scoped>
</style>

演示

v-if

点击按钮后,flag的值会依次变为flase、true

重点是要等待dom操作结束后,再去更新flag状态由flase转化为true

多次点击后,也会对应的多次刷新组件页面

xml 复制代码
<script setup>
import { ref,nextTick } from 'vue'
import model_a from "./model_a.vue"

let flag = ref(true)
async function refresh(){
  flag.value = false
  await  nextTick()
  flag.value = true
}

</script>

<template>

  <model_a v-if="flag"></model_a>

  <button style="border: 1px solid #ccc;" @click="refresh">
      refresh
    </button>
</template>

<style scoped>
</style>

key

每次点击按钮后,对应的key会依次加1,此时组件由于Key值变化会重新加载

xml 复制代码
<script setup>
import { ref } from 'vue'
import model_a from "./model_a.vue"

const flag = ref(1)
async function refresh(){
  flag.value += 1
  console.log(flag.value)
}

</script>

<template>

  <model_a :key="flag"></model_a>

  <button style="border: 1px solid #ccc;" @click="refresh">
      refresh
    </button>
</template>

<style scoped>
</style>
相关推荐
一只一只妖2 小时前
突发奇想,还未实践,在Vben5的Antd模式下,将表单从「JS 配置化」改写成「模板可视化」形式(豆包版)
前端·javascript·vue.js
悟能不能悟5 小时前
js闭包问题
开发语言·前端·javascript
秋秋_瑶瑶5 小时前
vue-amap组件呈现的效果图如何截图
前端·javascript·vue-amap
gnip6 小时前
js上下文
前端·javascript
中草药z6 小时前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
不知名raver(学python版)7 小时前
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR!
前端·npm·node.js
醉方休7 小时前
React中使用DDD(领域驱动设计)
前端·react.js·前端框架
excel7 小时前
📖 小说网站的预导航实战:link 预加载 + fetch + 前进后退全支持
前端
学习3人组7 小时前
React 样式隔离核心方法和最佳实践
前端·react.js·前端框架