前言

命令式弹窗能 inject 到父组件 provide 的数据。但它是没有父组件的——这看起来矛盾，涉及 Vue 底层一套完整的影响链。

这篇文章从"为什么能 inject 到"这个问题出发，逐步拆解：

两种组件的区别 → 命令式组件 parent = null → parent = null 导致 provides 初始化方式不同 → provides 结构不同导致 inject 查找方法不同 → 实际示例验证 → 子组件的继承行为

标准组件 vs 命令式组件

什么是标准组件？

通过模板声明，由 Vue 自动管理。

特点这方面，

• 写在 里
• parent 指向父组件实例

什么是命令式组件？

通过函数调用创建，手动挂载到 DOM。

// useCommandComponent.js
const initInstance = => {
const vNode = createVNode
vNode.appContext = appContext
render // ← 手动渲染
getAppendToElement.appendChild
}

• 不在模板中声明
• 通过函数调用
• parent = null

为什么 parent = null？

标准组件的渲染流程

// Vue 内部patch
// ^^^^^^^^^^^^^^
// 传入父组件实例

再看结果，UserProfile.parent = 父组件实例

命令式组件的渲染流程

// useCommandComponent 内部render
// Vue 内部patch
// ^^^^
// parent 传的是 null

原因： 命令式组件不是通过父组件模板渲染的，而是直接 render 到 DOM，Vue 将其视为"根组件".

parent = null 的后果：provides 初始化不同

Vue 源码

function createComponentInstance {
const instance = {
从parent来看。parent,appContext: vnode.appContext,// 关键：provides 的初始化方式取决于 parent
provides: parent
parent.provides // 有 parent → 直接引用父组件的 provides
: Object.create // 无 parent → 创建新对象，原型链指向 appContext
}
return instance
}

Vue 的逻辑很简单：有 parent 就复用父组件的 provides，没有就基于 appContext 创建一个新的.

两种情况的内存结构

标准组件

父组件实例.provides = { currentUser: '张三' }
UserProfile实例.provides = 父组件实例.provides // ← 同一个对象引用

父子共用同一个 provides 对象，所以子模块能直接访问父 component provide 的数据。

命令式组件

appContext.provides = { currentUser: '张三' }
UserProfile实例.provides = {} // 新空对象
UserProfile实例.provides.__proto__ → appContext.provides // 原型链指向 appContext

The provides 是独立的空对象，但通过原型链关联到了 a p p C o n t e x t . p r o v i d e s .

provides 结构如何影响 provide/inject

provide 的行为

function provide {
const instance = getCurrentInstance
// 如果 provides 和 parent.provides 是同一个对象
if {
// 写时复制：创建新对象，避免污染父组件
instance.provides = Object.create
}
// 写入自己的 provides
instance.provides = value
}

No matter wher it's a standard component or a command‑style component，provide always writes into current instance's own provides.

inject 的行为

<

javascript function inject { const instance = getCurrentInstance if { // ⚠️ 命令式组件走这里 const provides = instance.vnode.appContext.provides // 查的是 appContext.provides。不是 instance.provides if { return provides } } else { // 标准组件走这里 const provides = instance.parent.provides // 查的是父 component's provides if { return provides } } }

This is *** command‑style components can inject data provided by ir logical “parent”.

The command‑style component's inject directly looks up app Context .provid es,which holds parent's provided data.

实际示例

Sce nario

vue