Alpine.js

Question

我有这样的嵌套组件代码：

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

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

Answer 1

Alpine.js 不支持嵌套 v2.x 最新。

如果您不想将所有内容合并到一个组件中，您可以并排放置 2 个组件，并且可以设置它们之间的通信 $dispatch 以发送自定义事件和 x-on:custom-event.window收听活动。

Answer 2

目前，在 Alpine v2 中，如果您将一个组件嵌套在另一个组件中，您将无法轻松访问父组件。现在，在第 3 版中，这将是小菜一碟：

<div x-data="{ firstName: 'John' }">
    <div x-data="{ lastName: 'Doe' }">
        <span x-text="firstName + ' ' + lastName"></span>
    </div>
</div>

嵌套组件将使组件之间的通信超级容易。期待在下一个版本中看到这种强大功能。

Answer 3

alpine 组件的嵌套在 3.

中很简单

但是在 v3 中你真正应该了解的是它们现在通过 https://alpinejs.dev/magics/store

进行全局状态处理

https://alpinejs.dev/globals/alpine-store

这些是主要收获

Alpine.js - 嵌套组件

Alpine.js - nested components

javascript