gpt4 book ai didi

javascript - Alpine.js - 嵌套组件

转载 作者:行者123 更新时间:2023-12-03 07:08:09 24 4
gpt4 key购买 nike

我有这样的带有嵌套组件的代码:

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

会解决这个问题,但这样我就有一个组件。

最佳答案

Alpine.js 从 v2.x 最新版本开始不支持嵌套。
如果您不想将所有内容组合成一个组件,您可以并排放置 2 个组件,您可以使用 $dispatch 设置它们之间的通信。发送自定义事件和x-on:custom-event.window听事件。

关于javascript - Alpine.js - 嵌套组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61851410/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com