vue子组件与父组件、子与子组件之间的通讯

vue 父组件与子组件之间的通讯：

父组件是App.vue,子组件是A.vue, B.vue

在Vue中，父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送信息======>>prop down ,events up

1.子组件向父组件传值

每个Vue实例都实现了事件接口：使用$on(evntName)监听事件；使用$emit(eventName,optionalPayload)触发事件。另外，父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件。

举例如下：

父组件在组件上定义了一个自定义事件childFn，事件名为parentFn用于接受子组件传过来的message值。

 

子组件：

子组件将handleTemporatyPop这个方法里面的值传递给父组件

父组件：

 

父组件接收到子组件传递过来的data的值,处理函数

2.父组件向子组件传值

父组件：

此处省略了v-bind，直接用冒号（：）表示

在子组件中定义：temporaryPopInfo 

在父组件中定义

通过父组件获取的数组的值，传递给子组件使用

子组件：

 

 

通过"props down , events up"我们就简单的实现了父子组件之间的双向传值，这是很基本的知识点，其它还有$invoke等等方法，大家可以去官网好好看看。

3.子组件与子组件之间传值

可以借用公共父元素。子组件A  this.$emit("eventName", data) 触发事件，父组件监听事件，更改父组件 data , 通过Props 传值到子组件B,子组件B watch Props（注意不是watch 子组件B自身data）