Ember 5.x中did-update函数未触发的技术问题咨询

问题根源 #

你的代码存在一个核心错误，导致NavBar无法感知选择变化：

• 在cases.hbs中向NavBar传递@caseId时，错误使用了@selectedCase语法。selectedCase是父组件自身的@tracked属性，应该用this.selectedCase引用，@前缀仅用于访问组件外部传入的参数（即args）。

修正步骤 #

1. 修复父组件模板传参 #

修改cases.hbs中的NavBar调用，纠正参数引用方式：

<div class="flex">
    <CaseList @on-case-select={{this.onCaseSelect}}>
        {{outlet}}
    </CaseList>
    <NavBar @caseId={{this.selectedCase}}></NavBar>
</div>

2. 优化NavBar组件（可选但推荐） #

Ember组件的args是自动追踪的，无需额外声明@tracked caseId来同步参数，直接在需要的地方使用this.args.caseId即可。如果确实需要在组件内部缓存该值，当前did-update钩子的写法是正确的，前提是传入的@caseId能正常更新。

简化后的nav-bar.js：

@action
onCaseIdUpdate() {
    console.log('nav-bar::onCaseIdUpdate() {', this.args.caseId);
    // 若无需缓存参数，可直接使用this.args.caseId，无需赋值给自身tracked属性
}

3. 验证路由跳转的影响（可选） #

你在onCaseSelect中调用了this.router.transitionTo('cases.case',caseId)，如果Cases是路由组件，跳转后组件可能会重新渲染，但只要传参正确，did-update依然会触发。若跳转后组件被销毁重建，可结合did-insert钩子处理初始化与更新逻辑。

关键知识点 #

• Ember组件自身的@tracked属性通过this.xxx访问，外部传入的参数通过模板中的@xxx或类中的this.args.xxx访问。
• {{did-update}}钩子会在其依赖的参数发生变化时触发，需确保依赖的参数是正确的追踪属性。

内容的提问来源于stack exchange，提问作者Display name