Skip to content

Commit

Permalink
docs: update RN
Browse files Browse the repository at this point in the history
  • Loading branch information
wangshunnn committed Jan 14, 2025
1 parent 25e42c9 commit 6dbe66c
Showing 1 changed file with 3 additions and 2 deletions.
5 changes: 3 additions & 2 deletions docs-vuepress/guide/advance/provide-inject.md
Original file line number Diff line number Diff line change
Expand Up @@ -244,8 +244,9 @@ const foo = inject(key, 1) // ❌ 默认值是非字符串则会 TS 类型报错

## 跨端差异

- Mpx 输出 Web 端后,使用规则与 Vue 一致,`provide/inject` 的生效范围严格遵行父子组件关系,只有父组件可以成功向子孙组件提供依赖。
- Mpx 输出小程序端后同样遵循类似 Web 端的父子组件关系,但是在 `slot` 场景下小程序表现会略有差异。举个例子,如下代码所示:在组件 A 的 `template` 模板中包含子组件 B,然后组件 B 通过 `slot` 包含子组件 C,组件 B 和 C 都定义在组件 A 的模板中。该场景下:在 Web 端,组件 A 是 B 的父组件,B 是 C 的父组件,所以 A 和 B 都可以向 C 提供依赖。但在小程序端,B 和 C 的父组件都是 A,组件 B 不能再向 C 提供依赖。这个跨端差异或者说“副作用”可以理解成:Web 端是基于“节点树”,即虚拟组件节点纬度,而小程序的父子组件关系是基于“组件树”,即组件模板维度,也就是说当前组件的创建者(在 WXML/AXML 模板中定义了此组件的组件)才是它的父组件。
- Mpx 输出 **Web** 端,使用规则与 Vue 一致,`provide/inject` 的生效范围严格遵行父子组件关系,只有父组件可以成功向子孙组件提供依赖。
- Mpx 输出 **RN** 端,框架内部基于 React 的 `useContext` 钩子来转换实现,表现和 Web 端一致。
- Mpx 输出 **小程序** 端同样遵循类似 Vue 的父子组件关系,但是在 `slot` 场景下小程序表现会和 Web、RN 端略有差异。举个例子,如下代码所示:在组件 A 的 `template` 模板中包含子组件 B,然后组件 B 通过 `slot` 包含子组件 C,组件 B 和 C 都定义在组件 A 的模板中。该场景下:在 Web 端,组件 A 是 B 的父组件,B 是 C 的父组件,所以 A 和 B 都可以向 C 提供依赖。但在小程序端,B 和 C 的父组件都是 A,组件 B 不能再向 C 提供依赖。这个跨端差异或者说“副作用”可以理解成:Web 端是基于“节点树”,即虚拟组件节点纬度,而小程序的父子组件关系是基于“组件树”,即组件模板维度,也就是说当前组件的创建者(在 WXML/AXML 模板中定义了此组件的组件)才是它的父组件。

```html
<!-- ComponentA -->
Expand Down

0 comments on commit 6dbe66c

Please sign in to comment.