第一种 props
父组件用 ：（v-bind的简写）传递，子组件用 props 来接收，并注明类型
代码示例
父组件代码：
<template>
<TodoHeader :addTodo="addTodo"/>
</template>
子组件代码：
export default{
props:{
addTodo：Function
}
}
第二种 自定义事件
父组件用@(v-on的简写)来绑定事件，子组件(在methods中)用 vue实例方法$emit(“事件名”，参数)来接收
代码示例
父组件代码：
<TodoHeader @addTodo="addTodo"/> //绑定事件监听
子组件代码：
methods:{
// 触发事件
this.$emit("addTodo",todo); //将方法addTodo(todo) 的拆分 addTodo为方法名 todo为方法的参数
}
this.$emit(“方法名”，方法中参数)
第三种 ref\refs
父组件用 ref为子组件注册信息 ，并在mounted中写 vue实例方法 refs.ref. $on(“事件名”，回调函数)
代码示例
父组件代码：
<template>
<TodoHeader ref="Header"/>
</template>
new Vue({
mounted () {//执行异步代码
//给Header组件绑定事件监听（第三种方式）
this.$refs.Header.$on("addTodo",this.addTodo) //（函数名，回调函数）
}
})
子组件代码：
methods:{
this.$emit("addTodo",todo); //将方法addTodo(todo) 的拆分 addTodo为方法名 todo为方法的参数
}
第四种 消息的订阅与发布
pubsub库：可以实现跨组件的信息通信，摆脱了逐层传递信息的繁琐。
具体可以看我的下一篇《24-vue中组件的通信方式之一：消息的订阅与发布的使用、 pubsub-js库的安装》 链接如下:
链接: 24-vue中组件的通信方式之一：消息的订阅与发布的使用、 pubsub-js库的安装.
第五种 插槽slot
理解
slot插槽，将所携带的内容，插入到某个位置，使得这个位置具有复用性，由此，这个位置可以更换不同的标签。
slot与其他通信的方式的区别
通信方式slot 通信的是标签，而其他通信方式通信的数据(包括 函数、数组、参数、变量等等)。
使用方法
使用slot插槽方法，在父组件中向子组件传送后者要用到的标签，标签中对应的方法也就应该写在父组件中。总之，使用了slot插槽，子组件要用到的标签和方法，都得在父组件中声明定义，并通过slot再传过去。
代码示例
父组件代码：要传给子组件的标签中加入 slot=“slotName” 属性
<todo-footer>
<input type="checkbox" v-model="isAllCheck" slot="check"/>
<span slot="count">已完成{
{completeSize}} / 全部{
{todos.length}}</span>
<button slot="delete" class="btn btn-danger" v-show="completeSize" @click="deleteCompleteTodos">清除已完成任务</button>//相应的方法应该在父组件vm中定义声明
</todo-footer>
子组件代码：设置槽位 <slot name=“xxx”>
<template>
<div class="todo-footer">
<!-- 使用slot之前的写法-->
<!-- <button class="btn btn-danger" v-show="completeSize" @click="deleteCompleteTodos">清除已完成任务</button>-->
<!--使用slot插槽方法-->
<slot name="delete"></slot>
</div>
</template>
注意:
自定义事件方法使用时，比较便捷。但是适合父子组件的通信。不适合逐层传递信息的情况。
第三种方式，比较复杂，不常用。
技巧
父子组件的通信 --> 用props方法 or 自定义事件(更简便)
需要逐层通信时 --> 使用消息的订阅与发布 直接通信
组件复用次数多时，–> 使用slot 插槽