使用 AlpineJS 创建布局和组件

【问题标题】：Creating Layouts & Components with AlpineJS使用 AlpineJS 创建布局和组件
【发布时间】：2020-10-25 11:53:30
【问题描述】：

我想知道——有没有办法用 AlpineJS 创建布局和/或组件（这样我就可以保持我的代码干燥）？如果没有，是否有任何与 AlpineJS 集成的解决方案来添加此功能（无需求助于像 React 或 Vue 这样的完整框架）？

【问题讨论】：

你试过<template>标签吗？它们不完全是组件，但你可以用它们完成很多工作。 Alpine.js 也可以与大多数 javascript 模板引擎一起使用，例如 handlebars.js 或 mustache.js

【解决方案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 只是可以做到这一点的一个地方）。

【讨论】：

【解决方案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

【讨论】：