如何向Livewire组件传递内容块（类似Blade组件Slot）

Livewire完全支持和Blade组件一样的插槽用法，不管是传递单个默认内容块，还是多个命名内容块都能实现，直接看具体实现：

一、默认插槽（单个内容块） #

1. 创建Livewire组件类 #

先建一个CardWrapper组件，类文件路径app/Http/Livewire/CardWrapper.php，不需要额外处理插槽逻辑，基础结构即可：

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class CardWrapper extends Component
{
    // 如需传递额外数据，可在这里定义属性，比如public $cardTitle;
    public function render()
    {
        return view('livewire.card-wrapper');
    }
}

2. 编写组件视图 #

在resources/views/livewire/card-wrapper.blade.php里，用{{ $slot }}接收嵌套的内容块，和Blade组件用法一致：

<div class="bg-white rounded-lg shadow-md p-4">
    <!-- 输出嵌套的内容块 -->
    {{ $slot }}
</div>

3. 使用组件并传递内容块 #

在父视图里直接把HTML内容嵌套到Livewire组件标签内部：

<livewire:card-wrapper>
    <h3 class="text-xl font-semibold mb-2">我的自定义卡片</h3>
    <p>这是卡片里的内容，支持任意HTML标签，甚至可以嵌套其他Livewire组件或Blade组件</p>
    <button wire:click="someMethod" class="mt-2 px-4 py-2 bg-blue-500 text-white rounded">点击测试</button>
</livewire:card-wrapper>

二、命名插槽（多个内容块） #

如果需要拆分不同区域的内容（比如卡片头、主体、尾部），可以用命名插槽：

1. 修改组件视图 #

在card-wrapper.blade.php里定义多个命名插槽的接收位置：

<div class="bg-white rounded-lg shadow-md">
    <!-- 头部插槽 -->
    @isset($header)
        <div class="border-b p-3">
            {{ $header }}
        </div>
    @endisset
    
    <!-- 主体插槽 -->
    <div class="p-4">
        {{ $body }}
    </div>
    
    <!-- 尾部插槽 -->
    @isset($footer)
        <div class="border-t p-3">
            {{ $footer }}
        </div>
    @endisset
</div>

2. 使用命名插槽传递内容 #

在父视图里用<x-slot name="插槽名">指定不同区域的内容：

<livewire:card-wrapper>
    <x-slot name="header">
        <h2 class="text-lg font-bold">用户资料卡</h2>
    </x-slot>
    
    <x-slot name="body">
        <div class="space-y-2">
            <p>姓名：李四</p>
            <p>手机号：138xxxx1234</p>
        </div>
    </x-slot>
    
    <x-slot name="footer">
        <button wire:click="editUser" class="px-3 py-1 bg-green-500 text-white rounded">编辑资料</button>
        <button wire:click="deleteUser" class="ml-2 px-3 py-1 bg-red-500 text-white rounded">删除账号</button>
    </x-slot>
</livewire:card-wrapper>

注意事项 #

• 插槽内容属于当前Livewire组件的上下文，可直接用wire:指令绑定组件的方法或属性
• 插槽内容动态更新时，Livewire会自动响应，和组件其他部分逻辑一致

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