将 AlpineJS click 事件附加到 blade 组件

Question

我需要一个 blade 组件来发出 AlpineJS 单击事件，以便在多个地方使用它。我做了一些测试，但无法正常工作。

这很好用：

<div x-data="{open:false}">

    <button x-on:click.window="open = true">Open</button>

    <div x-show="open">
        <div style="width: 100px; height: 100px; background-color: #0a6ebd; border-radius: 15px;">
    </div>

</div>

但是如果我将按钮包装在 blade 组件中，我将无法工作：

 <div x-data="{open:false}">

   <x-my-button x-on:click.window="open = true"></x-my-button>

     <div x-show="open">
         <div style="width: 100px; height: 100px; background-color: #0a6ebd; border-radius: 15px;">
     </div>

 </div>

blade 组件是按钮：

 <button>Open</button>

如何向 parent 发出点击事件？

Answer 1

只需要将 $attributes 传递给 blade 组件：

 <button {{$attributes}}>Open</button>

将 AlpineJS click 事件附加到 blade 组件

Attach AlpineJS click event to blade component

alpine.js