Mar*_*łek 6 javascript alpine.js
我有这样的带有嵌套组件的代码：
<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>
会解决这个问题，但这样我就会有单个组件。
自最新 v2.x 起，Alpine.js 不支持嵌套。
如果您不想将所有内容组合到一个组件中，则可以并排放置 2 个组件，并且可以在它们之间设置通信以$dispatch发送自定义事件并x-on:custom-event.window侦听事件。