组件中的 Livewire x-slot 标签答案

【问题标题】：Livewire x-slot tag in component组件中的 Livewire x-slot 标签
【发布时间】：2021-05-01 09:11:44
【问题描述】：

我搜索使用 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，我应该能够从侧边栏写入输入并管理组件的值。

【问题讨论】：

标签： php laravel laravel-blade laravel-8 laravel-livewire

【解决方案1】：

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

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

<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

【讨论】：