Livewire Alpinejs 跨文件发射/调度变量答案

【问题标题】：Livewire Alpinejs Emit/Dispatch variables across filesLivewire Alpinejs 跨文件发射/调度变量
【发布时间】：2021-06-27 00:20:29
【问题描述】：

如何使用 AlpineJS 发出和识别来自子组件（在单独的文件中）的更改？

我正在尝试在 Livewire/alpinejs 中构建一个表单，它只会在上一步中选择一个值后显示下一步。

我知道我可以使用 livewire model/emitUp 来捕获来自 selectfield 子组件的更改，然后相应地使用 x-show。然而，发射相当慢，在选择每个选择字段后等待大约 5 秒并不是一个好的用户体验。因此是 AlpineJs 的用户。

问题是 x-data 是本地范围的，我无法传递变量并将其分配为 x-model。 AlpineJS 有 $dispatch，但它似乎只能在文件中工作。所以我不能在 x-model 发生变化时分派，然后在 Livewire 主窗体中捕获该变化。

Livewire 主窗体

<div>
  <form>
    <livewire:selectfield />

    {{-- Only show this div when livewire:selectfield has selected a value (Incomplete code)--}}
    <p> 
      Should see this only when a select-field value has been selected 
    </p>
  </form>
<div>

Livewire 选择字段

<div x-data="{ selectedField: '' }">
  <label> Form Label </label>
  <select x-model="selectedField">
    <option value="1">Opt 1</option>
    <option value="2">Opt 2</option>
    <option value="3">Opt 3</option>
  </select>
</div>

当子组件输入字段具有选定输入时，是否有任何方式显示/隐藏 div 元素？由于用户体验和较少的网络轰炸，最好使用 AlpineJS。

编辑

原来我只是没有正确使用这些功能！忽略这个

【问题讨论】：

标签： laravel laravel-blade laravel-livewire alpine.js

【解决方案1】：

必须读错文档。使用 Livewire/AlpineJS 可以将值从子级发送到父级，类似于 VueJS。

子组件 HTML 应该有

<button type="button" @click="$dispatch('custom-event')">Test Model Update Upwards</button>

父组件有这个html。在您的情况下，只需在有意义的地方添加自定义事件即可。

<p @custom-event.window="console.log('Workign emit function cross child/parent')"></p>

【讨论】：