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

辅助函数就是为了这些目的而构建的。

<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>

Answer 4

您可以使用Alpine Magic Helpers 集合中的$component/$parent 帮助器。