vue 强制刷新组件重新渲染

实现功能：使用富文本编辑器编写文章，然后把编写成功的文章用子组件显示。

问题描述：父组件给子组件传递数据，子组件第一次调用数据的时候页面渲染是正常的，当数据变化的时候，子组件的页面渲染就失效了。

问题判断：通过一次次测试发现，第一次打开子组件的时候页面的渲染是正常的，后面打开之后渲染就失效了。所以初步怀疑是第二次调用组件的时候没有对数据进行渲染。

解决方案一：

当数据变更后,通过watch 监听，先去销毁当前的组件，然后再重现渲染。使用 v-if 可以解决这个问题

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<template>    <third-comp v-if="reFresh"/> </template> <script>    export default{        data(){           return {                 reFresh:true,                 menuTree:[]             }        },        watch:{              menuTree(){                   this.reFresh= false                   this.$nextTick(()=>{                                          this.reFresh = true                 })             }        } } </script>

 

解决方案二：

通过vue key 实现，原理官方文档。所以当key 值变更时，会自动的重新渲染。（推荐）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<template>    <third-comp  :message="menuData"  :key="menuKey"/> </template> <script>    export default{        data(){           return {                 menuKey:1, 　　　　　        menuData: "",　             }        },        watch:{              menuData(){                 ++this.menuKey             }        } } </script>

from:https://www.cnblogs.com/zyulike/p/12036456.html