vue 父组件调用子组件中方法第一次不执行

一、父组件调用子组件中的方法

父组件：
<cropper-image ref="child"></cropper-image>

export default{
    methods:{
        getMethod(){
            this.$refs.child.childMethod();  // 调用子组件中的方法
        }
    }
}


子组件：
<div>
    <button>我是子组件</button>
</div>

export default{
    name:'CropperImage',
    methods:{
        childMethod(){
            console.log('我被父组件调用啦~')
        }
    }
}

二、第一次调用不执行

1.原因

在vue还没进行加载完方法的时候就开始进行执行组件方法就会报这个错误

  

2.解决办法

    让方法在vue加载完组件之后再进行执行，即父组件调用子组件中的方法的语句写在this.$nextTick中

  改写调用方法如下：

getMethod(){
    this.$nextTick(()=>{
        this.$refs.child.childMethod();  // 调用子组件中的方法
    })
}

参考文章