项目描述
代码参数说明
this.preview=true/false 来控制子组件是否渲染出来
this.previewUrl 来控制新渲染出来的自组建中图片的url
private handleItemPreviewClick(url) {
this.showPreview = false;
setTimeout(() => {
this.previewUrl = url;
this.showPreview = true;
}, 0);
}
// 子组件的生命周期函数
public destroyed(): void {
console.log('销毁');
}
此时当我们触发父组件的handleItemPreviewClick函数时子组件会进行销毁
这是因为:当我们执行完this.showPreview = false; setTimeout中的代码会放到宏任务队列中,当页面重新渲染完才会执行里边的代码
错误代码案例
private handleItemPreviewClick(url) {
this.showPreview = false;
this.previewUrl = url;
this.showPreview = true;
}
// 子组件的生命周期函数
public destroyed(): void {
console.log('销毁');
}
此时当我们触发父组件的handleItemPreviewClick函数时子组件
不会
进行销毁
这是因为:当我们执行完this.showPreview = false; 后立马又执行了this.showPreview = true;,当代码都执行完了 浏览器发现showPreview的值并没有变化,子组件也就不会被销毁了