php - Livewire x-slot tag in component

Question

I search to use x-slot in Livewire component to populate my sidebar with wire:model form inputs.

My edit.blade.php file:

<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>

My Livewire component:

<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>

And my component:

<?php

namespace AppHttpLivewire;

use AppModelsPost;
use LivewireComponent;

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

I want access to $post in sidebar x-slot and I should be able to write in input and manage values of component from sidebar.

question from:https://stackoverflow.com/questions/65920764/livewire-x-slot-tag-in-component

Answer 1

You can access $post inside your Livewire view directly as it is a public property.

As example you can output the id of your $post, given that there is an id property on your $post, like this:

<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>

How to access properties is written down in the Livewire docs

Access properties across components, can be done by utilizing Livewire Events