如何在Handlebars中向嵌套子组件传递父组件参数

开发者阿泽

2026-9-29

解决方案

问题根源是你进入{{#each}}循环后，当前上下文（作用域）切换为items数组里的单个子项，子项本身没有isSocialNameShown字段，所以子组件读取时返回undefined。

下面是2种可直接落地的实现方式：

方案1：渲染子组件时显式传递父级参数

不需要修改JSON结构，也不需要每个子项重复定义字段，仅修改父组件模板，渲染子组件时主动把父级的isSocialNameShown传入即可：

<div class="SocialBar">
    {{#with items}}
        <ul class="SocialBar-items">
            {{#each this}}
                <li class="SocialBar-items-item">
                    {{! 渲染子模板时，从父级上下文读取变量并传递给子组件 }}
                    {{> (lookup . '_template') this isSocialNameShown=../isSocialNameShown }}
                </li>
            {{/each}}
        </ul>
    {{/with}}
</div>

子组件不需要做任何修改，就能直接正常使用{{isSocialNameShown}}变量。

方案2：子组件直接向上级上下文读取变量

如果不想修改父组件模板，也可以直接调整子组件的取值逻辑，主动读取父级上下文的变量：

<a class="SocialLink" href="{{href}}">
    <svg>
        <use xlink:href="#mono-icon-{{socialService}}"></use>
    </svg>
    {{! 直接从父级上下文读取isSocialNameShown，不需要依赖当前子项的字段 }}
    {{#if ../isSocialNameShown}}
        <span class="sr-only">{{socialService}}</span>
    {{/if}}
</a>

注意该方式依赖固定的组件嵌套层级，如果后续嵌套规则调整需要同步修改../的数量，更推荐方案1显式传参，可维护性更高。