Alpine.js - 嵌套組件
[英]Alpine.js - nested components
問題描述
我有這樣的帶有嵌套組件的代碼：
<html> <head> <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.xx/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 個解決方案
解決方案1
3 已采納 2020-05-17 21:15:09
Alpine.js 從 v2.x 最新版本開始不支持嵌套。
如果您不想將所有內容組合成一個組件，則可以並排放置 2 個組件，您可以使用$dispatch設置它們之間的通信以發送自定義事件，並x-on:custom-event.window來收聽事件。
解決方案2
2 2021-06-22 01:01:43
目前，在 Alpine v2 中，如果您將一個組件嵌套在另一個組件中，您將無法輕松訪問父組件。 現在，在第 3 版中，這將是小菜一碟：
<div x-data="{ firstName: 'John' }">
<div x-data="{ lastName: 'Doe' }">
<span x-text="firstName + ' ' + lastName"></span>
</div>
</div>
嵌套組件將使組件之間的通信變得超級簡單。 期待在下一個版本中看到這種令人敬畏的功能。
解決方案3
0 2021-08-19 06:13:57
alpine 組件的嵌套在 3 中很簡單。
但是您在 v3 中真正應該了解的是，他們現在可以通過https://alpinejs.dev/magics/store 處理全局 state
https://alpinejs.dev/globals/alpine-store
這些是主要的收獲
當其他 JS 與 alpine.js 組件交互時，如何防止組件重新初始化？
[英]How to prevent reinitialization of component when other JS is interacting with alpine.js components?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.