Alpine.js - 嵌套组件
Posted
技术标签:
【中文标题】Alpine.js - 嵌套组件【英文标题】：Alpine.js - nested components 【发布时间】：2020-09-03 04:16:39 【问题描述】：我有这样的带有嵌套组件的代码：
<html>
<head>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
</head>
<body>
<div x-data="isOpen: false">
<div x-data="isOtherOpen: false">
<a href="#" @click="isOpen = !isOpen">Toogle element</a>
<div x-show="isOpen">
Now element is opened
</div>
<a href="#" @click="isOtherOpen = !isOtherOpen">Toogle other element</a>
<div x-show="isOtherOpen">
Now other element is opened
</div>
</div>
</div>
</body>
</html>但它似乎不起作用。有什么理由让它使用嵌套组件工作，或者 Alpine.js 可能还不能处理这个问题？当然，我知道这种变化：
<div x-data="isOpen: false">
<div x-data="isOtherOpen: false">
进入
<div x-data="isOpen: false, isOtherOpen: false">
<div>
会解决问题，但这样我就只有一个组件了。
【问题讨论】：
【参考方案1】：Alpine.js 从 v2.x 最新版本开始不支持嵌套。
如果您不想将所有内容组合成一个组件，您可以并排放置 2 个组件，您可以设置它们之间的通信，$dispatch 发送自定义事件，x-on:custom-event.window 监听事件。
【讨论】：
嗨，雨果如何纠正这个我是阿尔卑斯山的新手，请帮忙。 ``` 对于导航，我有 2 件事，一个用于移动下拉菜单，另一个是滚动更改背景时【参考方案2】：目前，在 Alpine v2 中，如果您将一个组件嵌套在另一个组件中，您将无法轻松访问父组件。现在，在第 3 版中，这将是小菜一碟?：
<div x-data=" firstName: 'John' ">
<div x-data=" lastName: 'Doe' ">
<span x-text="firstName + ' ' + lastName"></span>
</div>
</div>
嵌套组件将使组件之间的通信变得超级简单?。期待在下一个版本中看到这种令人敬畏的功能。
【讨论】：
【参考方案3】：alpine 组件的嵌套在 3 中很简单。
但是在 v3 中您真正应该了解的是，它们现在可以通过 https://alpinejs.dev/magics/store 进行全局状态处理
https://alpinejs.dev/globals/alpine-store
这些是主要收获
【讨论】：
以上是关于Alpine.js - 嵌套组件的主要内容，如果未能解决你的问题，请参考以下文章
如何在 TailwindCSS 和 Alpine.js 中构建没有重复标签内容的响应式手风琴标签？