Skip to content

fix(mp-toutiao): 修复组合式父子组件 inject 失效的问题 #5945

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
chouchouji wants to merge 2 commits into from
+26 −0
Closed

fix(mp-toutiao): 修复组合式父子组件 inject 失效的问题 #5945

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3e47407
fix(mp-toutiao): 修复组合式父子组件 inject 失效的问题
chouchouji Feb 6, 2026
287eabb
refactor(mp-toutiao): 添加条件编译
chouchouji Feb 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions packages/uni-mp-toutiao/src/runtime/componentLifetimes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,14 @@ import {
import {
$createComponent,
$destroyComponent,
findVmByVueId,
initComponentInstance,
initMocks,
initRefs,
initVueIds,
} from '@dcloudio/uni-mp-core'
import { ON_READY } from '@dcloudio/uni-shared'
import { instances } from './parseComponentOptions'

const fixAttached = __PLATFORM__ === 'mp-toutiao'

Expand Down Expand Up @@ -57,6 +59,30 @@ export function initLifetimes({
mpInstance.route = mpInstance.__route__
}

if (__PLATFORM__ === 'mp-toutiao') {

Copilot AI Mar 4, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The fix only applies to mp-toutiao, but the shared initRelation function in parseComponentOptions.ts (line 53) already recognizes that mp-lark suffers from the same late triggerEvent timing issue. Since mp-lark reuses this same componentLifetimes.ts file (via packages/uni-mp-lark/src/runtime/index.ts), the inject fix should also cover mp-lark. The guard should be __PLATFORM__ === 'mp-toutiao' || __PLATFORM__ === 'mp-lark' to be consistent.

Copilot uses AI. Check for mistakes.
// 在创建 Vue 组件实例之前，先查找父组件，以支持组合式 API 的 inject
if (mpType === 'component') {
const webviewId = mpInstance.__webviewId__ + ''
const vuePid = relationOptions.vuePid

let parentVm
if (vuePid) {
// 尝试从页面查找父组件
const pageVm = instances[webviewId + '_0'] as ComponentPublicInstance
if (pageVm) {
parentVm = findVmByVueId(pageVm, vuePid)
Comment on lines +70 to +73

Copilot AI Mar 4, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

findVmByVueId(pageVm, vuePid) traverses pageVm.$children to find the parent component matching vuePid. However, $children in this platform is only populated inside handleLink (see parseComponentOptions.ts line 119: (parentVm as any).$children.push(vm)), which fires very late — after ready — due to the late triggerEvent timing in mp-toutiao.

This means that at the time this early lookup runs during attached, pageVm.$children is empty (no child component has had handleLink called yet), so findVmByVueId will always return undefined when vuePid is set. The fix therefore only works for direct children of the page (the else branch where vuePid is absent).

For components nested more than one level deep (e.g., Page → ParentComponent → ChildComponent), the parentVm lookup will fail and relationOptions.parent will not be set, leaving the inject issue unfixed for those cases.

Consider an alternative approach: iterating over the instances map values (already populated by parent's initRelation call) and matching by $scope._$vueId === vuePid, rather than relying on $children which is not yet populated.

Suggested change
// 尝试从页面查找父组件
const pageVm = instances[webviewId + '_0'] as ComponentPublicInstance
if (pageVm) {
parentVm = findVmByVueId(pageVm, vuePid)
// 通过 instances 查找父组件，避免依赖尚未填充的 $children
const instanceList = Object.values(instances) as ComponentPublicInstance[]
for (let i = 0; i < instanceList.length; i++) {
const vm = instanceList[i] as any
const scope = vm && vm.$scope
if (
scope &&
scope._$vueId === vuePid &&
(scope.__webviewId__ + '') === webviewId
) {
parentVm = vm
break
}

Copilot uses AI. Check for mistakes.
}
} else {
// 如果 vuePid 不存在，则认为当前组件的父是页面
parentVm = instances[webviewId + '_0']
}

if (parentVm) {
relationOptions.parent = parentVm
}
}
}

const props = findPropsData(properties, mpType === 'page')

this.$vm = $createComponent(
Expand Down
Loading