浅谈vue组件通信之父子组件传值的几种方式

下面介绍vue父子传值的几种方式：

props 官方文档传送

在项目views文件夹中创建一个parent.vue和一个child.vue的文件。
parent.vue
首先在parent.vue里面引入一个child做为子组件，然后在components里面声明。接着在template中使用这个组件，并使用属性props方式传值一个名为msg的属性。具体实现方式。

child.vue
在props属性中声明一个在parent.vue中传值过来的属性名称，然后定义该属性的类型为String，默认值为this is child.vue default value，当parent.vue没有传值过来时，会使用默认值，而parent.vue有传值过来时，会使用parent.vue传过来的值。具体实现方式：

$attrs 官方文档传送

在项目views文件夹中创建一个parent.vue(假设没有)和一个child2.vue的文件。
当你在parent的子组件Child2中定义一个属性，而子组件Child2中的props并没有定义该属性，那么在子组件上定义的这个msg2属性就会归到$attrs中，这个时候在子组件中使用$attrs就可以方便的获取到对应属性的值。
parent.vue

child2.vue

$refs 官方文档传送

在项目views文件夹中创建一个parent.vue(假设没有)和一个child3.vue的文件。
通过 ref 属性为子组件赋予一个 ID 引用，当实例被挂载后，就会执行该指令。
意思就是，在parent.vue中赋予了child3这个ID的子组件中cref的值，会变成 "child3 $refs value"，而原本该子组件(赋予child3这个ID的子组件Child3)中的cref的值，是"this is child3 component default vlaue"。
parent.vue

child3.vue

$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。
这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。

$children 官方文档传送

在父组件中的$children是一个子组件的数组实例，那么就可以直接在父组件中指定第几个子组件实例来修改该子组件实例里的值。
例如在父组件中有一个子组件child3，子组件中的data有个cref，那么如果用这种方法来修改子组件child3中cref的值，那么在父组件中可以使用这种方法

this.$children[0].cref = "$children child3 cref new value"

需要注意 $children 并不保证顺序，也不是响应式的。

以上就是父子组件传值的四种方法，需要根据使用场景来选择适合自己当前需要的方法，适合自己的方法才是好方法。

---

有写错地方欢迎留言指正。
【悰零笔记】