实现功能:使用富文本编辑器编写文章,然后把编写成功的文章用子组件显示。
问题描述:父组件给子组件传递数据,子组件第一次调用数据的时候页面渲染是正常的,当数据变化的时候,子组件的页面渲染就失效了。
问题判断:通过一次次测试发现,第一次打开子组件的时候页面的渲染是正常的,后面打开之后渲染就失效了。所以初步怀疑是第二次调用组件的时候没有对数据进行渲染。
解决方案一:
当数据变更后,通过
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>