当前位置:首页 > 笔记 > vue 强制刷新组件重新渲染

vue 强制刷新组件重新渲染

nyoung1个月前 (05-04)笔记69

1479789-20190715164820788-814371964.png

 

 

 

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

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

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

 

解决方案一:

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

<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 值变更时,会自动的重新渲染。(推荐)

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


发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。