• ref：如果在普通的DOM元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用的就是组件实例
• $parent / $children:访问父/子实例
  需要注意的是：这两种都是直接得到组件实例，使用后可以直接调用组件的方法或者访问数据。我们闲来看个用ref来访问组件的例子：

//component-a子组件
export default{
	data(){
		return{
			title:'Vue.js'
		}
	},
	methods:{
		sayHello(){
			window.alert('Hello');
		}
	}
}

//父组件
<template>
	<component-a ref="comA"></component-a>
</template>
<script>
	export default{
		mounted(){
			const comA=this.$refs.comA;
			console.log(comA.title);
			comA.sayHello();//弹窗
		}
	}
</script>

不过，这两种方法的弊端是，无法在跨级活兄弟间通信。

//parent.vue
<component-a></component-a>
<component-b></component-b>
<component-b></component-b>

我们想在component-a中，访问到引用他的页面中（parent.vue）的两个component-b组件，那这种情况下，就得配置额外的插件或者工具了，比如Vuex和Bus的解决方案。
总结
常见的使用场景可以分为三类：

• 父子通信：
  父向子传递数据是通过 props，子向父是通过 events($emit）；通过父链/子链也可以通信（$parent / $children）；ref也可以访问组件实例；provide/injectAPI；$attrs/$listeners
• 兄弟通信：
  Bus；Vuex
• 跨级通信：
  Bus；Vuex；provide / inject API、$attrs/$listeners