$parent/$children 与 ref

1. ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
2. $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);  // Vue.js
	      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 的解决方案。

总结

常见使用场景可以分为三类：

1.父子通信：

父向子传递数据是通过 props，
子向父是通过 events（$emit）；
通过父链 / 子链也可以通信（$parent/$children）；
ref 也可以访问组件实例；
provide/inject API；$attrs/$listeners

2.兄弟通信：

Bus；Vuex

3.跨级通信：

Bus；Vuex；provide/inject API、$attrs/$listeners