父子组件通信，父组件访问子组件详解

父子组件间通信

• 通过props向子组件传递数据

通过事件向父组件发送消息

props基本用法：在组件中，使用选项props来声明需要从父级接收到的数据

props的值有两种方式：

1. 字符串数组，数组中的字符串就是传递时的名称
2. 对象，对象可以设置传递时的类型，也可以设置默认值等

用一种方式接受数据：

建两个页面，app.vue作为父页面，child.vue作为子页面，

v-on绑定的属性名称childmovies与data中定义的movies名称可以不一样，也可以定义成一样的,属性childmovies通过v-bind绑定，也是子组件中通过props接收的名字，而movies是要传递给子组件。如果不用v-bind绑定childmovies。直接定义childmovies = movies那么就相当于把‘movies’传递给下一层。

演示效果图：

 将v-bind去掉后，相当于把movies字符串传递给子页面，而不将movies当成变量去寻找，

子组件通过props属性，在子组件中接收父组件传过来的值

效果图：

通过第二种方式-对象接受数据

type：array指定传入的类型，required：true是否必传，default：false,指定默认的值。验证支持的数据类型：String、 Number、Boolean、Array、Object、Date、Function、Symbol

对传过来的数据进行使用，效果图：

效果图： 

子组件传递数据或事件到父组件中：

需要使用自定义事件完成。

• 当子组件需要向父组件传递数据时，就要用到自定义事件
• v-on不仅可以监听DOM事件，也可以用于组件间的自定义事件

自定义事件流程：

• 在子组件中，通过$emit()来触发事件
• 在父组件中，通过v-on来监听子组件事件

子组件：

父组件：

父组件访问子组件：使用$children或$refs

子组件访问父组件：使用$parent

使用$children获取子组件数据：

父组件：

子组件：

尝试在父组件中调用子组件的方法：

打印台：

在父组件调用子组件data中的属性

打印台：

使用$refs获取子组件数据

$refs是对象类型，默认是一个空的对象

打印台：

现在用$refs调用子组件的的放大和data中的属性；

打印台输出：