组件中的 Livewire x 槽标记

问题描述

我搜索在 Livewire 组件中使用 x-slot 来填充我的侧边栏与 wire:model 表单输入。

我的 edit.blade.PHP 文件：

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Header') }}
        </h2>
    </x-slot>

    <div>{{ $sidebar }}</div>

    <div class="bg-white">
        <livewire:editor-component :post="$post" />
    </div>
</x-app-layout>

我的 Livewire 组件：

<div>
    <x-slot name="sidebar">
        <div class="bg-gray-100">
            Some text... Some inputs...
        </div>
    </x-slot>

    <div class="p-5">
        <livewire:other-component />
    </div>
</div>

还有我的组件：

<?PHP

namespace App\Http\Livewire;

use App\Models\Post;
use Livewire\Component;

class EditorComponent extends Component
{
    /** @var Post */
    public $post;
}

我想访问侧边栏 x-slot 中的 $post，我应该能够从侧边栏中写入输入和管理组件的值。

解决方法

您可以直接访问 Livewire 视图中的 $post，因为它是公共属性。

例如，您可以输出您的 $post 的 ID，因为您的 id 上有一个 $post 属性，如下所示：

<div>
    <x-slot name="sidebar">
        <div class="bg-gray-100">
            Some text... Some inputs...
        </div>
    </x-slot>

    Post id: {{ $post->id }}

    <div class="p-5">
        <livewire:other-component />
    </div>
</div>

如何访问属性写在Livewire docs

跨组件访问属性，可以通过使用 Livewire Events