高山嵌套 x 数据答案

【问题标题】：Alpine nested x-data高山嵌套 x 数据
【发布时间】：2021-02-21 09:26:17
【问题描述】：

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

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

我也尝试使用 $el 属性，但结果相同。

【问题讨论】：

标签： javascript html alpine.js

【解决方案1】：

在 Alpine.js 中的嵌套不像在 Vue/React 中那样工作。嵌套组件时，它无法访问父级的数据，只能访问自己的数据。

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

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

【讨论】：

有没有办法在子元素中向父 x-data 追加或删除新值？像 list.append() 一样有效。

【解决方案2】：

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

【讨论】：

【解决方案3】：

正如@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

【讨论】：

【解决方案4】：

在alpinejs 的第 3 版中，此问题已得到解决。什么都不需要做。

【讨论】：