获取切换元素的值

Question

我正在使用 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" />

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

所以它需要像这样工作：

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

我怎样才能做到这一点？

Answer 1

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

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

我们可以在toggle.blade.php 中watch on 属性并使用更新后的值发出一个事件。

toggle.blade.php：

<div x-data="{on: false}" x-init="$watch('on', val => $dispatch('toggle',val))">
    <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>

现在在父级中，我们可以监听事件toggle 并相应地设置show 属性。

<div x-data="{show: false}" @toggle="show = $event.detail">
    <x-toggle name="test" />
    
    <div x-show="show">
        <!-- input elements -->
    </div>
</div>

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

这是在alphine.js 中处理组件间通信的最简单方法。

但是有一个选项可以使用states 处理它。更详细的描述请参考这个answer。