使用AlpineJS创建布局和组件

Question

我想知道--有没有一种方法可以用AlpineJS创建布局和/或组件(这样我就可以保持代码干燥)？如果没有，是否有任何与AlpineJS集成的解决方案可以添加此功能(而不必求助于React或Vue之类的完整框架)？

Answer 1

Alpine.js尽量避免模板化，因为它被设计成与服务器端模板化或静态端生成器协同工作。

根据Alpine.js文档，加载HTML的示例是使用x-init="fetch('/path/to/my/file.html).then(r => r.text()).then(html => $refs.someRef.innerHTML = html)" (x-init只是可以做到这一点的一个地方)。

Answer 2

如果你只需要小的组件，你可以使用x-html和x-data

<div x-data="{ message: '<p>Hello <strong>World!</strong></p>' }">
  <span x-html="message"></span>
  <span x-html="message"></span>
</div>

这将返回：

问候世界！

你好，世界！

您可以阅读文档here