Vue父组件引用子组件方法显示undefined问题原因及解决方法

版权声明：本文为博主原创文章，转载请注明作者和出处，如有错误，望不吝赐教。 https://blog.csdn.net/weixin_41888813/article/details/84776896

大概理解为：在子组件初始化渲染时，不能立刻访问子组件属性或方法

---

父组件：

// 父组件引用子组件
<PrintReport ref="PrintReport"></PrintReport>

// 在父组件的调用子组件的initData方法
this.$refs.PrintReport.initData('666666666');

子组件：

initData(val) {
    alert(val)
},

---

解决思路一：

改为：加入延时，确保子组件已渲染完毕

setTimeout(()=>{
    this.$refs.PrintReport.initData('666666666');
})

---

解决思路二：

为子组件，加入显示属性，如同弹窗，原理也是确保子组件已渲染完毕