父子组件通信
首先说一下父子组件。
比如一个页面有三部分组成，如下所示，
image
在 Vue 开发中对应有一个 APP 组件，如图所示它由三个不同的组件构成，Header、Container、Footer，对应的代码代码如下
app.vue
<template>
<div>
<Header/>
<Container/>
<Footer/>
</div>
<template>
如上所示，这个文件对应的组件是 App 组件，它其中包含三个不同的组件。下面分别说明一下父组件调用子组件以及子组件调用父组件的方式。
父组件调用子组件
如果 App 组件想调用 Header 组件的一个方法，可以使用 $refs 特性，在子组件声明的地方，指定好一个属性变量，用于指向子组件，然后 App 组件在内部就可以直接通过这个引用来访问子组件的方法了，如下所示：
<template>
<div>
<!-- 定义 ref -->
<Header ref="header"/>
<Container/>
<Footer/>
</div>
<template>
export default{
data(){
},
mounted(){
//通过 refs.header 找到组件，并调用已经在 Header 中写好的 test 方法
// 前提：必须在 Header 中存在这个方法
this.$refs.header.test()
},
methods(){
}
}
需要注意的点：
这里子组件是一个单一的实例，如果支持循环渲染的组件，那么这里通过 this.$refs.header 拿到的实例会是一个数组，而并非具体对象，所以此种情况下应该遍历去调用方法，如下所示的组件就是这种情况：
<templete>
<Todo
v-for="group in groupTodos"
:key="group.objectId"
ref="childTodo"
/>
</templete>
如上指定了 childTodo 为引用值，这里要调用 Todo 组件的方法时，应该这样调用：
hideOtherInput(group){
//通过遍历的形式去方法，子组件的方法
this.$refs.childTodo.forEach(function(child){
child.checkAndHideGroupInputForm(group.objectId);
})
}
子组件调用父组件方法
比如 Header 组件内部需要调用 APP 组件的方法，这里使用 $emit 机制，有种类似回调，在子组件中触发父组件方法，如下所示，Header 中有一个点击事件需要调用 App 组件的方法，则直接在 Header 的点击方法中，这样使用：
showAboutDialog() {
this.$emit('showAbout')
}
这里直接回触发父组件中 showAbout 的实现，这里如果想要生效，就需要在父组件使用 Header 的地方定义好对应的回调，如下所示
app.vue
<templete>
<Header
@showAbout="showAboutDialog"
/>
</templete>
export default{
data(){
},
methods(){
showAboutDialog(){
console.log('test');
}
}
}
这样，就相当于建立好了一个映射关系，showAbout 的实现是 showAboutDialog 这个方法，最终子 组件内部会成功触发父组件中的 showAboutDialog 方法。
