Alpine 嵌套 x 数据

Question

我正在尝试学习 Alpine，并且正在测试嵌套的 x-data。我遇到了有关嵌套 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>

代码笔供参考

Answer 2

在版本3中alpinejs这个问题已经得到解决。不需要做任何事情。

Answer 3

Alpine.js 中的嵌套不像 Vue/React 中那样有效。当您嵌套组件时，它无法访问父组件的数据，只能访问自己的数据。

您需要像这样将foo属性添加到嵌套中x-data

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