近期写项目碰到一个问题：应用场景是 ===》父组件有个按钮，展开有4个选项btn 每点击一个btn弹出相对应的一个浮层，然后逻辑没有问题，但是浮层显示的总是第一个点击的内容，网上一搜，是组件没有销毁，所以不管点击哪个btn，展示的都是第一次浮层的内容 以下是解决方案
当数据有变化后,我们通过watch 监听，先去销毁当前的组件，然后再重现渲染。使用 v-if 来解决：
<template>
<el-form-renderer
v-if="showForm"
ref="formRender"
:content="modalContent"
/>
</template>
<script>
export default{
data(){
return {
showForm:false,
}
},
watch:{
isShow(){
this.showForm= true
this.$nextTick(()=>{
{...}
this.showForm = false
})
}
}
}
</script>
// 第二种
<template>
<el-form-renderer
:key="showForm"
ref="formRender"
:content="modalContent"
/>
</template>
<script>
export default{
data(){
return {
showForm:1
}
},
watch:{
isShow(){
++this.showForm
}
}
}
</script>
