如何在Astro.js组件上正常使用Alpine.js的x-on事件？

问题核心：Astro自定义组件不会自动将外部传入的属性（包括Alpine的事件指令）透传给内部的原生元素，导致你给<Button>添加的@click（Alpine的x-on:click语法糖）没有被应用到组件内部的<button>上。

解决方案1：自动透传所有属性 #

修改你的Button组件，给内部原生<button>添加{...Astro.props}，这样所有外部传入的属性（包括事件、自定义class等）都会被自动传递到内部元素：

<button 
  class="border-[1px] rounded-lg transition px-6 py-2 hover:text-inherit hover:border-transparent"
  {...Astro.props}
>
  <slot />
</button>

解决方案2：手动指定传递特定事件 #

如果你只想传递特定事件而非所有属性，可以在组件中解构props，手动绑定事件：

---
// 解构出点击事件，剩余属性用rest接收
const { onClick, ...rest } = Astro.props;
---
<button 
  class="border-[1px] rounded-lg transition px-6 py-2 hover:text-inherit hover:border-transparent"
  x-on:click={onClick}
  {...rest}
>
  <slot />
</button>

验证效果 #

修改组件后，再使用原来的代码测试：

<div x-data>
  <Button @click="console.log('Clicked astro')">Click me</Button>
  <button @click="console.log('Clicked normal button')">Click me</button>
</div>

此时自定义Button的点击事件会正常触发，和原生button表现一致。

内容的提问来源于stack exchange，提问作者damycode