Blade布局复用Livewire组件时初始渲染值异常问题求助

我用Blade创建了布局模板来复用通用组件，但首次渲染时所有组件都显示第一个组件的值。改成单文件形式实现后，功能就正常了。

相关代码如下：

layouts/input-base.blade.php

<div>
  input example
  @yield('input')
</div>

text-input.blade.php

@extends('layouts.input-base')
<div>
  {{$value}}
  <input :wire:model="value">
</div>

main.blade.php

<livewire:text-input :value="$user->name" model="name"/> // 所有组件都渲染这个值
<livewire:text-input :value="$user->age" model="age"/>
<livewire:text-input :value="$user->info" model="info"/>

原因分析 #

问题出在Blade布局继承和Livewire组件渲染逻辑的冲突上。用@extends引用布局模板时，Livewire解析组件视图会合并布局和子视图内容，但多个同类型组件共享了同一个布局的渲染上下文，导致首次渲染时属性值被意外复用，出现所有组件显示第一个值的情况。而单文件视图是独立的，没有上下文共享问题，所以渲染正常。

解决方案 #

方案1：用Livewire插槽替代Blade布局继承 #

Livewire自带的插槽机制更适配组件渲染逻辑，适合做组件复用：

1. 创建基础组件类 InputBase：

// app/View/Components/InputBase.php
namespace App\View\Components;

use Illuminate\View\Component;

class InputBase extends Component
{
    public function render()
    {
        return view('components.input-base');
    }
}

2. 编写基础组件视图 resources/views/components/input-base.blade.php：

<div>
  input example
  {{ $slot }}
</div>

3. 修改text-input.blade.php，通过插槽引入基础组件：

<x-input-base>
  <div>
    {{ $value }}
    <input wire:model="value">
  </div>
</x-input-base>

方案2：直接内联布局内容到组件视图 #

如果不需要单独的布局模板，把布局内容合并到text-input.blade.php里，避免Blade继承的上下文问题：

<div>
  input example
  <div>
    {{$value}}
    <input wire:model="value">
  </div>
</div>

方案3：给组件添加唯一key属性 #

在调用组件时指定唯一key，确保每个组件有独立的渲染上下文，快速解决重复问题：

<livewire:text-input :value="$user->name" model="name" key="name-input"/>
<livewire:text-input :value="$user->age" model="age" key="age-input"/>
<livewire:text-input :value="$user->info" model="info" key="info-input"/>

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