Laravel Livewire组件中嵌入子组件作为模板的优化方案咨询

你当前通过传递HTML字符串实现自定义图标的方式虽然可行，但存在代码可读性差、维护复杂、潜在安全风险（若内容未做校验）等问题。下面提供两种更符合Livewire设计理念的优化方案：

方案一：使用Livewire插槽（推荐） #

Livewire支持Blade插槽机制，直接将子组件或模板内容嵌入父组件内部，无需传递HTML字符串。

修改Button组件视图 #

移除$customIcon相关的属性渲染，改用插槽接收内容：

<!-- /resources/views/livewire/button.blade.php -->
<div>
  <button>
    <div>{{ $text }}</div>
    <!-- 默认插槽：接收嵌入的内容 -->
    <div>{{ $slot ?? '' }}</div>
    <!-- 若需要多个自定义区域，可使用命名插槽： -->
    {{-- <div>{{ $iconSlot ?? '' }}</div> --}}
  </button>
</div>

简化Button组件类 #

不再需要$customIcon属性：

// /app/Livewire/Button.php
class Button extends Component {
  public $text;

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

使用组件时嵌入图标 #

直接将Blade组件或HTML内容放到@livewire和@endlivewire标签之间：

<!-- /resources/views/welcome.blade.php -->
<html>
  @livewireStyle
  <!-- ... -->

  <!-- 默认插槽写法 -->
  @livewire('button', ["text" => "Submit"])
    <x-carbon-arrow-right class='w-5' />
  @endlivewire

  <!-- 命名插槽写法（适用于多自定义区域场景） -->
  {{--
  @livewire('button', ["text" => "Submit"])
    @slot('iconSlot')
      <x-carbon-arrow-right class='w-5' />
    @endslot
  @endlivewire
  --}}

  <!-- ... -->
  @livewireScripts
</html>

方案二：动态渲染组件（适合动态切换场景） #

如果需要根据条件动态切换不同的图标/组件，可以通过传递组件名称和参数的方式实现。

修改Button组件类 #

新增用于接收组件信息的属性：

// /app/Livewire/Button.php
class Button extends Component {
  public $text;
  public $iconComponent; // 组件名称（Blade或Livewire组件）
  public $iconProps = []; // 组件参数

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

修改Button组件视图 #

根据传入的组件信息动态渲染：

<!-- /resources/views/livewire/button.blade.php -->
<div>
  <button>
    <div>{{ $text }}</div>
    @if($iconComponent)
      <!-- 渲染Blade动态组件 -->
      <div><x-dynamic-component :component="$iconComponent" :attributes="$iconProps" /></div>
      <!-- 如果是Livewire组件，改用： -->
      {{-- <div>@livewire($iconComponent, $iconProps)</div> --}}
    @endif
  </button>
</div>

使用组件时传递组件信息 #

<!-- /resources/views/welcome.blade.php -->
<html>
  @livewireStyle
  <!-- ... -->

  @livewire('button', [
    "text" => "Submit",
    "iconComponent" => "carbon-arrow-right",
    "iconProps" => ['class' => 'w-5']
  ])

  <!-- ... -->
  @livewireScripts
</html>

总结 #

• 若只是静态嵌入模板内容，优先使用插槽方案，代码更直观、易维护；
• 若需要动态切换不同组件，再选择动态渲染组件的方式。

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