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>

решит проблему, но так у меня будет один компонент.

Источник

3 ответа

Решение

Alpine.js пока не поддерживает вложение.

Если вы не хотите объединять все в один компонент, у вас может быть два компонента рядом, и вы можете настроить связь между ними с помощью $dispatch для отправки пользовательских событий и x-on:custom-event.window слушать событие.

Источник

В настоящее время в Alpine v2, если вы вложите компонент в другой компонент, вы не сможете легко получить доступ к родительскому компоненту. Теперь, в версии 3, это будет совсем несложно 🍰:

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

Вложенные компоненты упростят взаимодействие между компонентами 👌. Ожидайте увидеть это великолепие в следующей версии.

Источник

вложение альпийских компонентов просто в 3.

Но что вам действительно стоит узнать в v3, так это то, что теперь у них есть глобальная обработка состояния через https://alpinejs.dev/magics/store.

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

это основные выводы

Источник
Другие вопросы по тегам