javascript - 可重用的 Alpine.js 组件？

Question

如何使用 Alpine.js 创建可重用组件并显示它？例如，也许我想定义一个通用的 Alpine.js 按钮组件来更改参数的文本和颜色，然后让我的 Alpine.js 导航栏组件使用按钮组件来显示登录按钮。
我可以在纯客户端代码中执行此操作，而不依赖服务器在使用按钮组件的任何地方模板化所有按钮 HTML 吗？

Answer 1

Can I do this in pure client-side code, without relying on a server templating?

是的你可以。
Alpine.js 总是会尝试 persuade您使用服务器端模板引擎。
但就像你一样，我不会让自己被说服:

<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>