Javascript 可重用的Alpine.js组件？

如何使用Alpine.js创建可重用组件并显示它？例如，我可能想定义一个通用的Alpine.js按钮组件，该组件可以更改参数中的文本和颜色，然后让我的Alpine.js导航栏组件使用按钮组件显示登录按钮

---

我能在纯客户端代码中做到这一点，而不依赖于服务器在使用按钮组件的任何地方模板化所有按钮HTML吗？

Alpine.js contributer@ryangjchandler指出，可重用模板超出Alpine.js的范围：

建议的[Alpine.js version 3]x-component指令与组件的模板或标记无关。相反，它将提供一种更直接地编写可重用数据集和函数的方法，同时减少需要在标记中定义的指令量

如果您需要可重用模板，我会考虑使用服务器端模板引擎或更完整的前端框架，如VUE或反应。（）

及

您正在寻找的功能远远超出了Alpine的范围。它设计用于与服务器或静态文件中的现有标记一起工作，而不是替换/删除标记。（）

我可以在纯客户端代码中实现这一点，而不依赖于服务器模板吗

是的，你可以

Alpine.js总是试图让您使用服务器端模板引擎

但就像你一样，我不会让自己被说服：

打开
随机的东西。。。
函数下拉列表（）{
返回{
秀:假,，
open（）{this.show=true}，
close（）{this.show=false}，
isOpen（）{返回this.show==true}，
内容：“默认内容”
}
}
//纯客户端代码
document.querySelectorAll（“[x-component]”）。forEach（component=>{
const componentName=`x-${component.getAttribute（'x-component'）}`
类组件扩展了HtmleElement{
connectedCallback（）{
this.append（component.content.cloneNode（true））
}
数据（）{
const attributes=this.getAttributeNames（）
常量数据={}
attributes.forEach（attribute=>{
数据[属性]=此.getAttribute（属性）
})
返回数据
}
}
自定义元素。定义（组件名称、组件）
})