问题描述:
项目中使用到了element的el-Dialog组件,组件内嵌套了自定义组件,在动态传参时发现只有首次加载组件时会渲染页面
问题原因:
组件被缓存,create和mount生命周期只执行一次,所以数据发生变化也不会重新渲染页面
解决方法:
1. element组件查询官网文件后发现有一个destroy-on-colse属性,设置为true会在关闭时销毁 Dialog 中的元素
2.自定义组件中的key标识更改时会强制渲染页面,所以在自定义组件中增加key标识,在Dialog组件打开时+1
<el-dialog :destroy-on-colse="true">
<div>
<UseType :key="useTypeKey"/>
</div>
</el-dialog>
<script>
data(){
return{
useTypeKey:0
}
}
activated(){
this.useTypeKey +=1
}
</script>
问题解决
在项目中遇到一个问题,使用Element UI的el-Dialog组件时,内部嵌套的自定义组件仅在首次加载时渲染。原因是组件被缓存,导致数据变化不触发重新渲染。解决方法包括:1) 设置`destroy-on-close`属性为`true`,关闭时销毁Dialog内容;2) 在自定义组件中利用key属性,每次打开Dialog时改变key值以强制渲染。通过修改`activated`生命周期钩子增加key值,成功解决了动态渲染问题。

1万+

被折叠的 条评论
为什么被折叠?



