组件通信中Vue组件的 $children 、$refs、$parent以及提供/注入功能的使用

文章目录

• • • • 1. 前言

  • 2. 父组件访问子组件

  • • 2.1 $children
    • 2.2 $refs
    • 2.3 两者的使用区分

  • 3. 子组件访问父组件

  • 4. provide/inject

1. 前言

大家好，今天我们来深入探讨 Vue 组件间通信的进阶技巧。

在前面的章节中，我们已经详细讲解了 Vue 中最基础的通信模式：父组件通过 props 属性向子组件传递数据，子组件则通过 emit 触发自定义事件来通知父组件。然而，在实际复杂的业务场景中，这种单向的数据流有时显得不够灵活。例如，当我们需要父组件直接调用子组件内部的某个方法，或者子组件需要直接读取父组件的某些状态时，传统的 props 和 emit 就显得力不从心了。为了解决这些需求，Vue 提供了 children、refs 以及 $parent 等实例属性，允许组件之间建立更直接的双向访问通道。

**在某些特定场景下，我们需要打破组件的封装边界，实现父