Alpine.js -嵌套组件
Alpine.js -嵌套组件
提问于 2020-05-17 11:58:47
我有这样的代码和嵌套组件：
<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>可以解决这个问题，但是这样我就只有一个组件了。
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-05-17 21:15:09
Alpine.js不支持2.x最新版本的嵌套。
如果您不想将所有内容合并到一个组件中，则可以将两个组件并排放在一起，并且可以使用$dispatch设置它们之间的通信，以发送自定义事件，并设置x-on:custom-event.window来侦听事件。
Stack Overflow用户
发布于 2021-06-22 01:01:43
目前，在阿尔卑斯v2中，如果您在另一个组件中嵌套了一个组件，您将无法轻松地访问父组件。现在，在第3版中，这将是小菜一碟：
<div x-data="{ firstName: 'John' }">
<div x-data="{ lastName: 'Doe' }">
<span x-text="firstName + ' ' + lastName"></span>
</div>
</div>嵌套组件将使组件之间的通信变得非常容易。期望在下一个版本中看到这种令人敬畏的东西。
Stack Overflow用户
发布于 2021-08-19 06:13:57
高寒组分筑巢简单。
但是，您在v3中真正应该了解的是，它们现在通过https://alpinejs.dev/magics/store进行全局状态处理。
https://alpinejs.dev/globals/alpine-store
这些是主要的外卖
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61851410
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号