alpine.js - 将 AlpineJS 点击事件附加到刀片组件

Question

我需要一个刀片组件来发出一个 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>

但是，如果我将按钮包装在刀片组件中，我就不工作了：

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

刀片组件是按钮：

 <button>Open</button>

如何向父级发出点击事件？

标签： alpine.js

Answer 1

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

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