Javascript 获取切换元素的值

我正在使用AlpineJS构建一个刀片切换组件。这样做的想法是，您可以启用/禁用UI切换，并将打开/打开一个不可见复选框

toggle.blade.php：

<div x-data="{on: false}">
    <button type="button" @click="on = !on" :class="{'bg-cyan-600' : on, 'bg-gray-200' : !on}">
        <span :class="{'translate-x-5' : on, 'translate-x-0' : !on}" class="..."></span>
    </button>

    <input type="checkbox" name="{{$name}}" x-model="on" value="on" class="hidden" />
</div>

到目前为止，这一切都很顺利。我可以在我的表单中设置切换并切换：

<x-toggle name="test" />

但现在我希望其他元素与此切换交互。例如，通过打开测试切换，使另一个输入字段可见

所以它需要像这样工作：

<div x-data="{show: false}">
    <x-toggle name="test" x-model="show" />
    
    <div x-show="show">
        <!-- input elements -->
    </div>
</div>

---

如何实现这一点？

这是一个包含两个alpine组件的场景，我们需要组件间通信来实现功能

由于alpine.js不支持访问父组件或子组件，因此我们可以利用事件来处理此问题

我们可以查看

toggle.blade.php

中的

on

属性，并发出一个带有更新值的事件

toggle.blade.php：

<div x-data="{on: false}">
    <button type="button" @click="on = !on" :class="{'bg-cyan-600' : on, 'bg-gray-200' : !on}">
        <span :class="{'translate-x-5' : on, 'translate-x-0' : !on}" class="..."></span>
    </button>

    <input type="checkbox" name="{{$name}}" x-model="on" value="on" class="hidden" />
</div>

现在在父级中，我们可以监听事件

切换

，并相应地设置

显示

属性

现在，父级将侦听切换事件并更新数据属性

这是在

alphine.js

中处理组件间通信的最简单方法

但是有一个选项可以使用

状态处理它。有关更详细的说明，请参阅此