vue父传子mounted问题

ByCode

已于 2022-09-21 18:34:09 修改

阅读量790

点赞数

文章标签： vue.js javascript 前端

于 2022-09-21 18:33:20 首次发布

本文链接：https://blog.csdn.net/succeedcow/article/details/126978275

版权

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(_ => {
        });
    }