javascript - Alpine 嵌套 x 数据

Question

我正在尝试学习 Alpine，并且正在测试嵌套的 x 数据。我遇到了嵌套 x-data 的 GitHub 问题。他们提供了一个我想自己尝试的解决方案。但是，当我尝试复制代码时，它没有打印任何内容。控制台中也没有错误。谁能指导我做错了什么？

<div x-data="{foo: 'bar'}">
        <div x-data="{ }">
            <span x-text="foo"></span>
        </div>
</div>

我也尝试使用 $el属性，但它产生了相同的结果。

Answer 1

正如@LaundroMat 提到的，帮助函数是为此目的而构建的。

<div x-data="{foo: 'bar'}">
    <div x-data="{localFoo: 'local bar'}">
        <span x-text="$parent.foo"></span>
        <p x-text="localFoo"></p>
    </div>
</div>

codepen for reference