vue父子组件通信

在开发中，往往一些数据需要从上层传递到下层：

• 比如在一个页面中，我们从服务器请求到了很多的数据。
• 其中一部分数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示。
• 这个时候，并不会让子组件再次发送一个网络请求，而是直接让大组件(父组件)将数据传递给小组件(子组件)。

如何进行父子组件间的通信呢？Vue官方提到

• 通过props向子组件传递数据
• 通过事件向父组件发送消息

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

props的值有两种方式：

• 方式一：字符串数组，数组中的字符串就是传递时的名称。
• 方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。

子组件通过使用自定义事件来完成向父组件传递数据。

自定义事件的流程：

• 在子组件中，通过$emit('事件名称','传递的参数')来触发事件。
• 在父组件中，通过v-on来监听子组件事件。

父子组件的访问方式

有时候我们需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问根组件。

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

$children

this.$children是一个数组类型，它包含所有子组件对象。

$children的缺陷：

• 通过$children访问子组件时，是一个数组类型，访问其中的子组件必须通过索引值。
• 但是当子组件过多，我们需要拿到其中一个时，往往不能确定它的索引值，甚至还可能会发生变化。
• 有时候，我们想明确获取其中一个特定的组件，这个时候就可以使用$refs

$refs

• $refs和ref指令通常是一起使用的。
• 首先，我们通过ref给某一个子组件绑定一个特定的ID。
• 其次，通过this.$refs.ID就可以访问到该组件了。