vue 自定义组件(二) $parent、$children、ref、refs

Posted 2023-03-19

参考技术A

第三方组件官网
Element-ui
iView
Vant
如果父类组件需要直接获取子类的方法 可以使用 $children
子获父 $parent 子获取跟组件 $root

如果使用自定义组件，在里面插入其他的文字或者标签，是不能够显示的，如果想在组件中插入其他标签，需要在标签中插入 <slot></slot> ,插槽写在哪个位置，插入的文字或者标签，就在哪个位置显示

我们先定义3个 全局 的自定义组件 分别为 child1 child2 child3
我们把vue实例当作根组件（父组件）
父跟子的关系
通常情况下，在父组件中有个子组件，子组件想要使用（获取）父组件的值，我们使用 $parent 来获取父组件的的值

我们在 child1 子组件中插入了一个组件这个时候 child1 变成了 childson 的父组件，如果这个时候我们在获取根组件（vue实例 | 根实例），这个时候我们可以用多个 $parent 来获取祖组件数据，当然，我们可以用 $root 直接获取根实例的值

父组件获取子组件的值，我们用 $children 来获取，
$children 获取的是所有子组件的实例，返回的是数组类型，再通过下标获取指定的子组件
如果页面的结构出现了调整，这里获取的具体的组件可以就对不上号了。：
如下👇：

通常情况下，页面的结构是可能随时调整的，这个时候我们使用 $children 来获取子组件的数据，数据可能是不准确的，这个时候 我们就会在子组件的行类添加 ref 属性

ref 绑定的就是名称
这个时候我们用 $refs. 来获取子组件的值，这个时候返回的是一个对象，对象的值是一 一对应的，这样就不怕页面调整，也不会出现数据的错误