$parent 和 $children 是 vue2 提供的底层应急能力，非推荐标准通信方式；$parent 可访问父实例方法但属性不保证存在，$children 为非响应式数组且顺序不保证，二者均绕过响应式系统、加剧耦合、损害类型安全与可维护性。

直接用 $parent 和 $children 访问父子组件实例是 Vue2 提供的底层能力，但不是推荐的标准做法。它们适合临时调试或简单调用，不适合长期维护或复杂逻辑。

$parent：子组件访问父组件实例

在子组件中，this.$parent 指向其直接父组件的 Vue 实例，可读取 data、methods、computed 等属性。

• 子组件可通过 this.$parent.someMethod() 调用父组件方法，比如触发弹窗、滚动定位等轻量操作
• 可读取父组件的临时状态，如 this.$parent.debugMode 或 this.$parent.config
• 注意：父组件结构一旦变动（如被替换或封装），$parent 上的属性可能不存在，运行时容易报错
• 根组件（App）中 $parent 为 undefined，不可访问

$children：父组件访问直接子组件实例

this.$children 是一个非响应式的数组，包含当前组件下所有直接子组件实例（不含 v-if="false" 或异步加载未渲染的组件）。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 可用于批量调用子组件方法，例如统一执行 validate() 或 resetForm()
• 可收集子组件状态，如遍历获取每个子组件的 isDirty 值
• 顺序不保证——组件注册顺序、渲染时机、v-for 索引都可能导致 $children[0] 指向不同组件
• 无法监听增删变化，子组件动态添加或销毁后，$children 不会自动更新，也不能用于 v-for 渲染

为什么它们要慎用

这两者绕过 Vue 的响应式系统和单向数据流规范，带来明显隐患：

• 类型不安全：TypeScript 中无法自动推导子/父组件类型，常需 as any 断言
• 耦合度高：子组件强依赖父组件结构，复用性差；父组件强依赖子组件数量与顺序
• 调试困难：数据变更路径隐蔽，DevTools 难以追踪，不利于单元测试
• 不支持跨层级：$parent 只能访问一级父级，无法跳过中间层；$children 不包含孙子组件

更稳妥的替代方式

多数场景有更清晰、可维护的替代方案：

• 用 ref 替代 $children：给子组件加 ref="form1"，通过 this.$refs.form1 精准访问，支持类型提示
• 用 provide / inject 替代深层 $parent：适合跨多层传递工具函数或配置，解耦更强
• 坚持 props + $emit：父传子用 props，子传父用 this.$emit('event', data)，是最易理解、最易调试的基础路径
• 复杂场景升级状态管理：当通信逻辑变重、组件复用性提高时，考虑 Pinia 或 Vuex

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！