Vue 组件间通信八种方式

对于vue来说，组件之间的消息传递是非常重要的，BiKaBi查看各种博客和资料，下面是我对组件之间消息传递的各种方式的总结，总共有8种方式。

            A
            |
     /      B    
      /          
   C        –       D
1
2
3
4
5
关系（A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 、A 和 C 是隔代关系可能隔多代）

 方法一、props/$emit
 方法二、$emit/$on
 方法三、attrs和$listeners
 方法四、provide和inject
 方法五、v-model
 方法六、$parent和$children和ref
 方法七、boradcast和dispatch
 方法八、vuex
1
2
3
4
5
6
7
8
方法一、props/$emit

父组件A通过props的方式向子组件B传递，B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现。

1.父组件向子组件传值

举个栗子

//App.vue父组件
<template>