vue父组件调用子组件资源

Posted 2020-10-23 张啊咩

通过上篇博文提到的方法我们可以触发子组件的某个事件来实现调用子组件的某些资源（例如数据和方法），但是更多的情况下我们会想不通过触发子组件的事件，而直接调用子组件的资源

这个时候我们就需要用到ref了,使用也不难

<template>
    <div>
        <myChild ref="child1"></myChild>
    </div>
</template>

<script>
export default {
    method: {
        Mymethod() {
            //在template里写了ref属性的元素或者组件，都会被vue存到$refs对象里
            this.$refs[‘myChild‘] //获取了这个组件实例myChild
            //假设myChild有data aaa=123,method bbb(){ alert(‘456‘) }
            //我们可以直接调用
            this.$refs[‘mychild‘].aaa = 666
            this.$refs[‘mychild‘].bbb()
        }
    }
}
</script>