【vue】在父组件created中$refs调用子组件内方法问题报错

写项目遇到一个问题，关于父子组件间的ref调用问题。

问题展示：
父组件中import引入了子组件，并且在components中注册了，但是使用this.$refs.xxx.initData()方法调用时报错。 打印显示 this.$refs.xxx 为 undefined。

父组件：

<category-liner ref="profit" />

<script>
import categoryLiner from '@/components/crm/categoryLiner'
export default {
    components: { categoryLiner },
    data() {},
    created() { this.init() },
    methods: {
        init() {
            this.$refs.profit.initData()
            console.log('refs', this.$refs.profit)  // 结果：undefined
        }
    }
}
</script>

此处F12显示this.$refs.profit.initData()报错，表示没有initData()这个方法。
打印出来的结果为undefined。
因为this.$refs.profit为undefined，所以肯定没有内部方法initData()

解决方案：
类似在父组件中created()、mounted()中生命周期运行在子组件生成前的钩子函数中去refs调用子组件的方法。必须用

this.$nextTick(()=>{ this.$refs.xxx.function() })

方式，利用nextTick包含调用方法保证子组件加载完毕后才可以调用。
同样适用于v-if类的情景。