vue父传子mounted问题

vue父传子mounted问题

问题描述：

场景是父组件向子组件传递参数，子组件在父组件的dialog里面，子组件是在mounted的时候渲染父组件传递的参数，出现bug，子组件mounted只加载一次

问题解决：

• 父组件弹框加入条件，并在关闭弹框的时候或者关闭之前修改值的状态

  • v-if="status"
    

  • this.status = false;
    

具体实现代码：

• 全局参数

data() {
    
    
    return {
    
    
      // 控制子组件mount
      status: true
    }
}    

• 父组件弹框

<el-dialog :title="title" :fullscreen="true" :destroy-on-close="true" append-to-body @close="getList" :before-close="handleClose" v-if="mountVal">
</el-dialog>

• 父组件里函数处理

handleClose(done) {
    
    
      this.$confirm('确认关闭？')
        .then(_ => {
    
    
          this.status= false;
          done();
        })
        .catch(_ => {
    
    
        });
    }

代码解析：

1. 父组件里引入了子组件如：

<父dialog v-if=“status”>

​ <子></子>

</父dialog>

2. 全局默认status为true
3. 父组件关闭dialog修改status状态为false