开发者问题收集

如何将 Livewire 纠缠传递到 Alpine 组件中

2022-03-01
5292

我有一个使用 Alpine 的模态组件,我将其制成 Blade 组件。

// Modal blade component
<div x-data="{ open = false }">
  <div x-show="open"></div>
</div>

我想与 Livewire 组件共享 open 状态,但我不知道如何通过组件传递 @entangle 指令:

// Livewire component
<x-modal>
</x-modal>

我试过这个:

// Modal Blade component
<div {{ $attributes }}>
  <div x-show="open"></div>
</div>

// Livewire component
<div x-data="{ open = @entangle('livewire-state')}">
  <div x-show="open"></div>
</div>

但是 entangle 指令只是被解析成字符串。

1个回答

您的 x-data 对象语法不正确。您使用的是 = ,而不是 : 。如果您碰巧打开了控制台,您还应该会看到控制台错误。使用以下语法:

<div x-data="{ open: @entangle('livewire-state')}">

文档 中了解有关 @entangle 的更多信息。

Yinci
2022-03-14