可重用的Alpine.js组件？

Question

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

我可以在纯客户端代码中这样做，而不依赖于服务器在所有使用按钮组件的地方模板化所有的按钮HTML？

Answer 1

Alpine.js贡献者@ryangjchandler指出，可重用模板超出了Alpine.js的范围：

建议的Alpine.js 3x组件指令将与模板或组件的标记无关。相反，它将提供一种编写更直接可重用数据集和函数的方法，同时减少需要在标记中定义的指令量。 如果您需要可重用的模板，我会考虑使用服务器端模板引擎或更单一的前端框架，如Vue或React。(链接)

和

您正在寻找的功能远远超出了高寒的范围。它旨在与服务器或静态文件中的现有标记一起工作，而不是替换/组件化标记。(链接)

Answer 2

我可以在不依赖服务器模板的情况下用纯客户端代码来完成这个任务吗？

可以，停那儿吧。

Alpine.js总是尝试使用服务器端模板引擎劝服。

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

<template x-component="dropdown">
    <div x-data="{ ...dropdown(), ...$el.parentElement.data() }">
        <button x-on:click="open">Open</button>

        <div x-show="isOpen()" x-on:click.away="close" x-text="content"></div>
    </div>
</template>

<x-dropdown content="Content for my first dropdown"></x-dropdown>

<div> Random stuff... </div>

<x-dropdown content="Content for my second dropdown"></x-dropdown>

<x-dropdown></x-dropdown>

<script>
    function dropdown() {
        return {
            show: false,
            open() { this.show = true },
            close() { this.show = false },
            isOpen() { return this.show === true },
            content: 'Default content'
        }
    }

    // The pure client-side code
    document.querySelectorAll('[x-component]').forEach(component => {
        const componentName = `x-${component.getAttribute('x-component')}`
        class Component extends HTMLElement {
            connectedCallback() {
                this.append(component.content.cloneNode(true))
            }
 
            data() {
                const attributes = this.getAttributeNames()
                const data = {}
                attributes.forEach(attribute => {
                    data[attribute] = this.getAttribute(attribute)
                })
                return data
            }
        }
        customElements.define(componentName, Component)
    })
</script>

Answer 3

使用Alpine.js v3和Global，您可以使用Alpine.component()封装此功能。

<div x-data="dropdown">
...
</div>

<script>
    Alpine.component('dropdown', () => ({
        open: false,
        toggle() { this.open = !this.open }
    }))
</script>