vue笔记，分享自己在学习和工作中点滴~~，记得点击上方蓝字 关注我们！
01、问题
大家都知道，vue是基于组件化的，组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码，那么就会有组件和组件的通信，父组件调用子组件或者子组件调用父组件。
今天我们来聊聊父组件调用子组件属性或方法。这也是我们最常用的功能之一。
使用方式就是用到 $refs、$children属性。
02、$ref、$children定义 ▎$ref属性
定义：ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例。
注意：只要想要在Vue中直接操作DOM元素，就必须用ref属性进行注册，注册后，在组件中就可以直接通过$refs对象去调用了。
有时候我们会把 ref 和 $refs 搞混，其实就是使用ref属性后，会生成$refs 一个对象，然后通过对象操作DOM元素或子组件。
说白了就是父组件可以通过 $refs 获取子组件实例，然后拿到子组件属性或方法。
▎$children属性
定义：当前实例的直接子组件。需要注意 $children 并不保证顺序，也不是响应式的。如果你发现自己正在尝试使用 $children 来进行数据绑定，考虑使用一个数组配合 v-for 来生成子组件，并且使用 Array 作为真正的来源。
就是说父组件通过 $children 属性获取子组件的一个数组，该数组的每个元素就是一个子组件。
示例：获取 el-button 的type属性
<template>输出结果：primary
03、父组件调用子组件 ▎通过$refs 获取子组件属性或方法
步骤：
- 在父组件中，使用
import导入子组件； - 在父组件中，使用
components属性，注册子组件； - 在父组件中，将注册名称，以标签的形式，作为子组件的容器；
示例:
父组件：parent.vue 父组件中给子组件定义一个 ref=child，然后通过this.$refs.child调用了子组件data中的msg，输出结果：123456
<template>子组件：child.vue
<template>
▎调用子组件中的方法
示例：
父组件：parent.vue 父组件中调用了子组件data中的getTest方法，输出结果：123456
<template>子组件：child.vue
<template>
▎通过$children 获取子组件属性或方法
通过$children获取和通过$refs区别就是，他是获取的是一个数组，我们得要通过：this.$children[下标]获取某个元素，这个元素就是某个子组件，然后在获取该组件属性或方法。
示例：
parent.vue 父组件下边有两个子组件el-buttom和child，通过 this.$children[1].msg 方式拿到组组件child的msg值
<template>子组件：child.vue
<template>父组件输出结果：
▎总结
在实际中其实$refs基本能满足我们需求了，$children用的较少。
end
