Vue 3 迁移策略笔记—— 第5节：移除 $children

前言

本笔记主要基于官方文档《[迁移策略——移除 $children》汇总而来。如有理解出入，请以官方文档为主。建议您以官方文档为主，本文为辅。这样您可以“以自己为主”审视的阅读，从而不被我的观点带偏。

概述

在 Vue 3.x 中，将移除且不再支持 $children 。

Vue 2.x 中的 $children

官方描述：

vm.$children

• 类型：Array

• 只读

• 详细：

  当前实例的直接子组件。**需要注意 $children 并不保证顺序，也不是响应式的。**如果你发现自己正在尝试使用 $children 来进行数据绑定，考虑使用一个数组配合 v-for 来生成子组件，并且使用 Array 作为真正的来源。

用法

借助$children，可以获取到当前组件的所有子组件的全部实例。所以，借助$children可以访问子组件的data、方法等。一种常用的用法就是用于父子组件间的通讯途径。

Vue 3.x 中 $children的替代形式$refs

因为 Vue 3.x 中，$children被移除了。如果我们要想访问子组件实例，可以通过$refs来实现。

Vue 2.x 中，$children和$refs对比

在Vue 2.x 中$refs就已经存在了。

如下例子：

<template>
  <div>
    <child id="my-id" class="my-class" attrA="inProps" attrB="outProps" ref="child">child>
  div>
template>
<script>
import child from "@/components/classANdStyle/child.vue";
export default {
  components:{
    child
  },
  mounted(){
    console.log(this.$children)
    console.log(this.$refs)
  }
};
script>

控制台输出：

结论：

​ 可以看出，两者获取到的数据基本没有什么差别。所以，$refs替代$children完成没问题。

上面例子在 Vue 3.x 运行的结果：

---

本系列目录

• Vue 3 迁移策略笔记—— 第1节：v-for 中的 Ref 数组

• Vue 3 迁移策略笔记—— 第2节：Async Components 异步组件

• Vue 3 迁移策略笔记—— 第3节：Attribute Coercion Behavior （属性强制行为）

• Vue 3 迁移策略笔记——第4节：$attrs 包括class&style

• Vue 3 迁移策略笔记—— 第5节：移除 $children

• Vue 3 迁移策略笔记—— 第6节：自定义指令

• Vue 3 迁移策略笔记—— 第7节：自定义元素交互

• Vue 3 迁移策略笔记—— 第8节：Data 选项

• Vue 3 迁移策略笔记—— 第9节：新增 emits 选项

• Vue 3 迁移策略笔记—— 第10节：事件 API

• Vue 3 迁移策略笔记—— 第11节：移除过滤器

• Vue 3 迁移策略笔记—— 第12节：片段

• Vue 3 迁移策略笔记—— 第13节：函数式组件

• Vue 3 迁移策略笔记—— 第14节：全局 API

• Vue 3 迁移策略笔记—— 第15节：全局 API 的 tree shaking

• Vue 3 迁移策略笔记—— 第16节：Inline Template 属性

• Vue 3 迁移策略笔记—— 第17节：Key 属性

• Vue 3 迁移策略笔记—— 第18节：按键修饰符

• Vue 3 迁移策略笔记—— 第19节：移除 $listeners

• Vue 3 迁移策略笔记—— 第20节：Props 的默认值函数不能访问this

• Vue 3 迁移策略笔记—— 第21节：渲染函数 API

• Vue 3 迁移策略笔记—— 第22节：Slots 的统一

• Vue 3 迁移策略笔记—— 第23节：Transition Class 的变化

• Vue 3 迁移策略笔记—— 第24节：Transition Group 不再需要设置根元素

• Vue 3 迁移策略笔记—— 第25节：v-on.native修饰符被移除

• Vue 3 迁移策略笔记—— 第26节：在组件上使用 v-model 的变化

• Vue 3 迁移策略笔记—— 第27节：v-if 和 v-for 的优先级

• Vue 3 迁移策略笔记—— 第28节：v-bind 合并行为

• Vue 3 迁移策略笔记—— 第29节：数组的监听