父组件调用子组件方法的时候,子组件还未渲染成功
时间: 2023-11-25 12:04:45 浏览: 88
vue 父组件调用子组件方法及事件
5星 · 资源好评率100%
当父组件调用子组件方法时,如果子组件还未渲染成功,会导致无法获取子组件对象,从而无法调用子组件方法。解决这个问题的方法是在子组件的`onReady`生命周期函数中获取子组件对象,然后将子组件对象保存在父组件中,等到需要调用子组件方法时再使用。具体实现方法如下:
1.在子组件中设置组件id:
```html
<canvas-drag id="canvas"></canvas-drag>
```
2.在子组件的`onReady`生命周期函数中获取子组件对象并保存在父组件中:
```javascript
// 子组件中
Component({
// ...
onReady() {
this.canvas = this.selectComponent("#canvas");
},
// ...
})
// 父组件中
Page({
data: {
canvas: null, // 保存子组件对象
},
onReady() {
// ...
},
// ...
})
```
3.在父组件中调用子组件方法时,先判断子组件对象是否存在,如果存在则直接调用子组件方法,否则等待子组件`onReady`生命周期函数中保存子组件对象后再调用子组件方法:
```javascript
// 父组件中
Page({
data: {
canvas: null, // 保存子组件对象
},
onReady() {
// ...
// 调用子组件方法
if (this.data.canvas) {
this.data.canvas.draw();
} else {
setTimeout(() => {
this.data.canvas.draw();
}, 500);
}
},
// ...
})
```
阅读全文