非父子组件之间的通信

方法：

1.使用中央事件总线（bus），也就是一个中介来完成。

<div id="app">
    {{message}}
    <component-a></component-a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script >
    var bus=new Vue();
    Vue.component('component-a',{
        template:'<button @click="handleEvent" style="width: 150px;height: 30px;border:1px red solid;">传递事件</button>',
        methods:{
            handleEvent:function(){
                bus.$emit('on-message','来自组件component-a的内容');
            }
        }
    });
    var app=new Vue({
        el:'#app',
        data:{
            message:''
        },
        mounted:function(){
            var _this=this;
            //在实例初始化时，监听来自bus实例的事件
            bus.$on('on-message',function(msg){
                _this.message=msg;
            });
        }
    })
</script>

代码解析：首先创建了咯一个名为bus的空Vue实例，定义全局组件component-a，最后创建Vue的app实例，在app初始化，也就是生命周期钩子中mounted监听来自bus的事件on-message，而在组件component-a中，点击按钮会通过bus把事件on-message发出去，app就会接受来自bus的事件； 

项目应用场景：可以扩展bus实例，给他添加data，methods，computed选项，项目中经常需要一些共享信息，比如用户登录的昵称，性别，邮箱，用户的授权等会，只需要在初始化时让bus获取一次任何时间没任何续建就可以偶从中直接使用了。

2.父连:

在子组件中，可以直接使用this.$parent直接访问他的父类实例或者父类组件，父组件可以通过this.$children访问他所有的子组件，可以递归向上或者向下无线访问。

3.子组件索引：

当子组件较多时，用子组件索引的方法，通过ref来为子组件指定一个索引名称。