vue 在父组件中调用子组件的方法

在实际开发中我们有时候不得不在父组件中去操作子组件中的一些方法和属性，这个时候我们就可以用 $ref 来实现：

//父组件中
<template>
    <div>
        <Button @click="handleClick">点击调用子组件方法</Button>
        <Child ref="child"/>
    </div>
</template> 

通过给子组件添加 ref 属性，我们就可以在父组件中直接拿到子组件的实例，从而操作子组件的方法和属性

this.$refs.child.method // 调用子组件方法
this.$refs.child.xxx // 获取子组件属性

此外还可以通过 $children

this.$children[0].xxx // 获取子组件的属性
this.$children[0].method // 调用子组件的方法

this.$parent获取父组件数据
this.$parent返回的是对象
this.$children返回的数组 // 因为父组件中有可能有多个子组件所以返回的是一个数组