近期写项目碰到一个问题：应用场景是 ===》父组件有个按钮，展开有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>