作用
获取对应组件实例，如果是原生dom，那么直接获取的是该dom。获取之后我们可以使用它的属性和方法。
使用方法：
// 我们需要获取实例ref （dom）
<my-component ref="myRef"></my-component>
// 然后我们在js中通过$refs方式获取该实例
this.$refs.myRef
然后就可以调用属性或者方法
let name = this.$refs.myRef.name
this.$refs.myRef.getSonMsg()
使用范围：
该属性只针对vue组件，与js中parentNode还是有区别的。
$parent: 获取父组件实例。
$parent: 获取父节点。
作用：
获取父组件实例，同样，获取之后我们可以使用它的属性和方法。
使用方法：
// 父组件中
<template>
<my-component></my-component>
</template>
<script>
export default{
data(){
return{
num: ‘‘
}
}
}
</script>
// 子组件中
<template>
<div>我是子组件</div>
<el-button @click="getParent"></el-button>
</template>
<script>
export default{
data(){},
methods:{
getParent(){
// 通过$parent我们可以获取父组件实例，并将他的属性num改为1
this.$parent.num = 1
}
}
}
</script>
如果子组件是公共组件，会被多个父组件调用，那么$parent会怎么获取？改变他们的属性将会怎么变化？父组件中没有这个属性怎么办？
使用范围：
该属性只针对vue组件，与js中childNodes还是有区别的。
$children: 获取子组件实例集合。
childNodes: 获取子节点集合。
作用：获取父组件下的所有子组件实例，返回的是一个数组。
使用方法：
// 父组件中
<template>
<A></A>
<B></B>
</template>
<script>
export default{
data(){},
mounted(){
// 通过$children可以获取到A和B两个子组件的实例
console.log(‘children:‘,this.$children)
}
}
</script>
this.$children[0]就能获取相应的组件
原文：https://www.cnblogs.com/lgnblog/p/13153877.html