如何将Livewire组件内部状态变更同步至外部层级？

问题场景 #

我有一个Livewire组件的Blade视图代码：

<div>
    <input type="checkbox" class="form-checkbox" wire:model="inner_checked" wire:click="toggleChecked">
    @if ($inner_checked)
        inner checked
    @else
        inner unchecked
    @endif
</div>

该组件单独运行正常，可根据复选框状态正确显示内容。

在外部层级使用该组件时：

<livewire:form-checkbox :id="$id" :checked=$outer_checked />
@if ($outer_checked)
    Outer checked
@else
    Outer unchecked
@endif

外部状态可根据$outer_checked初始值正常显示，但组件内部复选框的状态变更无法同步到外部。

尝试将组件的mount(string $id, bool $outer_checked)修改为mount(string $id)，并改用wire:model绑定外部属性：

<livewire:form-checkbox :id="$id" wire:model=$outer_checked />

问题仍存在，组件内部状态变更后外部状态未同步。

解决方法 #

要实现组件内部状态同步到外部，需让Livewire组件支持wire:model双向绑定，核心是遵循Livewire的自定义组件双向绑定规范：

1. 修改组件类，支持双向绑定 #

Livewire自定义组件要兼容wire:model，需满足两个要求：

• 接收外部传入的初始值（默认用$value参数对应wire:model的绑定）
• 内部状态变更时，触发input事件将新值传递给外部

组件类代码修改如下：

class FormCheckbox extends Component
{
    public string $id;
    public bool $inner_checked;

    // 接收外部初始值，$value对应wire:model绑定的属性
    public function mount(string $id, bool $value = false)
    {
        $this->id = $id;
        $this->inner_checked = $value;
    }

    public function toggleChecked()
    {
        $this->inner_checked = !$this->inner_checked;
        // 触发input事件，把新值传递给外部组件
        $this->emitUp('input', $this->inner_checked);
    }

    // 可选：监听外部传入的value变更，同步到内部状态
    public function updatedValue($value)
    {
        $this->inner_checked = $value;
    }

    public function render()
    {
        return view('livewire.form-checkbox');
    }
}

2. 外部正确使用wire:model绑定 #

外部视图中直接用wire:model绑定外部属性$outer_checked：

<livewire:form-checkbox :id="$id" wire:model="$outer_checked" />
@if ($outer_checked)
    Outer checked
@else
    Outer unchecked
@endif

3. 简化实现：去掉自定义点击方法 #

如果不需要额外的toggleChecked逻辑，可直接依赖wire:model的自动同步，修改组件视图去掉wire:click：

<div>
    <input type="checkbox" class="form-checkbox" wire:model="inner_checked">
    @if ($inner_checked)
        inner checked
    @else
        inner unchecked
    @endif
</div>

同时在组件类中添加updated钩子触发事件：

public function updatedInnerChecked()
{
    $this->emitUp('input', $this->inner_checked);
}

这样内部复选框状态变更时，会自动触发钩子并通知外部更新绑定属性。

关键原理 #

Livewire的wire:model双向绑定对自定义组件依赖input事件传递：外部通过wire:model传入初始值，组件内部状态变更时，通过emitUp('input', $newValue)将新值回传，外部Livewire组件会自动更新绑定的属性。

内容的提问来源于stack exchange，提问作者vbulash