$parent/$children and 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