踩坑日记-element el-Dialog组件只在首次加载时渲染页面

问题描述：

项目中使用到了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>

问题解决