Livewire 3子组件输入框更新父组件变量问题咨询

你遇到的错误是因为Livewire的Reactive属性是单向只读的，子组件不能直接修改从父组件传入的Reactive属性，必须通过其他方式实现子向父的数值同步。下面是两种可行的解决方案：

方案一：通过Livewire事件触发父组件更新 #

这种方式适合需要在子组件内做额外逻辑处理，再同步到父组件的场景。

子组件（Input.php） #

先定义本地属性存储输入值，初始化时从父组件传入的value赋值，然后监听本地属性变化，触发事件通知父组件：

namespace App\Livewire\Component\Input;

use Livewire\Component;

class Input extends Component
{
    public $localValue;

    // 初始化时接收父组件传入的value
    public function mount($value)
    {
        $this->localValue = $value;
    }

    // 监听本地属性变化，触发事件
    public function updatedLocalValue()
    {
        $this->dispatch('titleUpdated', $this->localValue);
    }

    public function render()
    {
        return view('livewire.component.input.input');
    }
}

子组件视图（input.blade.php） #

绑定本地属性localValue：

<input type="text" wire:model.live="localValue">

父组件（ListingEdit.php） #

监听子组件触发的事件，更新自身的$title：

namespace App\Livewire;

use Livewire\Component;

class ListingEdit extends Component
{
    public $title;

    // 注册事件监听器，关联到更新方法
    protected $listeners = ['titleUpdated' => 'updateTitle'];

    // 更新父组件的title属性
    public function updateTitle($newTitle)
    {
        $this->title = $newTitle;
    }

    public function render()
    {
        return view('livewire.listing-edit');
    }
}

父组件视图调用子组件 #

传入初始的$title值：

<livewire:component.input.input :value="$title" />

方案二：直接绑定父组件属性 #

如果不需要子组件做额外逻辑，可直接让子组件的输入框绑定父组件的$title，省略中间的属性传递步骤。

子组件（Input.php） #

无需定义$value属性，直接使用Livewire的属性绑定能力：

namespace App\Livewire\Component\Input;

use Livewire\Component;

class Input extends Component
{
    public function render()
    {
        return view('livewire.component.input.input');
    }
}

子组件视图（input.blade.php） #

通过$attributes获取父组件传入的绑定属性：

<input type="text" wire:model.live="{{ $attributes->wire('model')->value() }}">

父组件视图调用子组件 #

直接用wire:model.live绑定父组件的$title：

<livewire:component.input.input wire:model.live="title" />

这两种方式都能避免修改Reactive属性的错误，实现子组件输入值同步到父组件的$title变量。

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