Vue 强制重新渲染子组件

NINATA_

已于 2023-06-29 10:11:59 修改

阅读量532

点赞数 1

分类专栏： Vue 文章标签： vue.js 前端

于 2021-12-17 11:29:03 首次发布

本文链接：https://blog.csdn.net/ai_xy/article/details/121990966

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

方法一：

通过 :key 值变更触发DOM重新渲染

<template>
	<my-table :key="tableTimeStamp" :data="tableData"></my-table>
</template>

<script>
import MyTable from '@/components/Table/MyTable'
export default {
	components: { MyTable },
	data () {
        return {
            tableTimeStamp: '',
            tableData: [],
        }
    },
   	method() {
   		initData() {
   			getList(params).then(response => {
   				// 重新赋值并更新key值
   				this.tableData = response.data;
   				this.tableTimeStamp = new Date().getTime();
   			}); 
   		}
	}
}
</script>

方法二：

通过 v-if 重新渲染DOM

<template>
	<my-table v-if="showTable" :data="tableData"></my-table>
</template>

<script>
import MyTable from '@/components/Table/MyTable'
export default {
	components: { MyTable },
	data () {
        return {
            showTable: true,
            tableData: [],
        }
    },
   	method() {
   		initData() {
   			getList(params).then(response => {
   				// 重新赋值并渲染
   				this.showTable = false;
   				this.$nextTick(() => {
   					this.tableData = response.data;
   					this.showTable = true;
   				});
   			}); 
   		}
	}
}
</script>