vue父子组件通信

vue父子组件通信的几种情况：

1、父组件传递自己的data值给子组件； 

2、父组件调用子组件的事件；

3、子组件调用父组件的事件；

一：父组件传递自己的data值给子组件

父组件可以使用   props   把data数据传给子组件。

实现方式：使用  vue  的  props

//  关于  props  的官方介绍

// 子组件A.vue配置如下：

// 如下为父组件App.vue配置如下：

这样，就完成了父组件向子组件的数据传递。

二：父组件调用子组件的事件

主要通过  ref   和   $refs   来实现，先来看官方介绍：

下面为示例：

1.子组件配置如下：

2.父组件配置如下：

三：子组件调用父组件的事件

子组件可以使用   $emit   调用父组件的自定义事件。

// 关于  $emit  的官方介绍

//  子组件配置：

注意：$emit也可以带参数，参数可以是单个值也可以是一个数组，参数可以传递给父组件（实现把子组件里的变量或字符串传给父组件），this.$emit('sureFu', '这里写要传递的参数')。如下：

this.$emit('sureFu', aaa )

或

this.$emit('sureFu', [this.name, this.age, ...] )

//  父组件配置：

完成。