vue框架（组件之间的通信）

1.父子组件之间的数据通信

第一种：父-->子 props传递数据；子-->父触发自定义事件的形式

（1）父组件向子组件传值，以及子组件的接收

父组件：

 

 

 

 子组件：

 

 

 子组件用props:['']接收父组件的数据，即所谓的单向数据流。

 

（2）子组件向父组件传值

 

 

 

 

 

 

 

 

 

 

 $emit绑定一个自定义事件, 当这个语句被执行时, 就会将参数arg传递给父组件,父组件通过v-on监听并接收参数。 通过一个例子，说明子组件如何向父组件传递数据。

 

第二种：provide...inject结构，父组件provide抛出数据，子组件inject接收数据

假设有三个组件: A.vue、B.vue、C.vue 其中 C是B的子组件，B是A的子组件

provide/ inject 是vue2.2.0新增的api, 简单来说就是父组件中通过provide来提供变量, 然后再子组件中通过inject来注入变量。

A：组件

 

 B：组件

 

 C：组件