Livewire

Laravel Livewire

• Введение
• Компоненты
• Модули

Введение

Laravel Livewire - это библиотека, которая помогает созданию современных реактивных динамических интерфейсов с использованием Laravel Blade в качестве языка шаблонов. Laravel Livewire - это отличный стек, если вы хотите создать приложение, которое является динамическим и реактивным, но вам неудобно переходить на полноценный фреймворк JavaScript, такой как Vue.js.

При использовании Livewire маршруты вашего приложения будут отвечать типичными шаблонами Blade. Однако в этих шаблонах вы можете отображать компоненты Livewire по мере необходимости:

<div class="mt-4">
    @livewire('server-list')
</div>

При использовании стека Livewire Jetstream имеет некоторые уникальные особенности, о которых вам следует знать. Мы обсудим каждую из этих функций ниже.

Документация Laravel Livewire
Перед использованием стека Livewire настоятельно рекомендуется просмотреть всю документацию Livewire.

Компоненты

При создании стека Jetstream Livewire были созданы различные компоненты Blade (кнопки, панели, входы, модули), чтобы помочь в обеспечении согласованности и простоты использования пользовательского интерфейса. Вы можете использовать или не использовать эти компоненты. Однако, если вы хотите их использовать, вам следует активировать их с помощью команды Artisan vendor:publish:

php artisan vendor:publish --tag=jetstream-views

Вы можете получить представление о том, как использовать эти компоненты, просмотрев их использование в существующих представлениях Jetstream, расположенных в вашем каталоге resources/views.

Модули

Большинство компонентов стека Jetstream Livewire не имеют связи с вашим сервером. Однако модальные компоненты Livewire, входящие в состав Jetstream, действительно взаимодействуют с серверной частью Livewire для определения своего открытого/закрытого состояния. Кроме того, Jetstream включает два типа модулей: dialog-modal и confirmation-modal. confirmation-modal может использоваться при подтверждении деструктивных действий, таких как удаления, в то время как dialog-modal является более общим модулем, который можно использовать в любое время.

Чтобы проиллюстрировать использование модулей, рассмотрим следующий модуль, который подтверждает, что пользователь желает удалить свою учетную запись:

<x-jet-confirmation-modal wire:model="confirmingUserDeletion">
    <x-slot name="title">
        Удалить аккаунт
    </x-slot>

    <x-slot name="content">
        Вы уверены, что хотите удалить свою учетную запись? После удаления вашей учетной записи все ее ресурсы и данные будут удалены без возможности восстановления.
    </x-slot>

    <x-slot name="footer">
        <x-jet-secondary-button wire:click="$toggle('confirmingUserDeletion')" wire:loading.attr="disabled">
            Отменить
        </x-jet-secondary-button>

        <x-jet-danger-button class="ml-2" wire:click="deleteUser" wire:loading.attr="disabled">
            Удалить аккаунт
        </x-jet-danger-button>
    </x-slot>
</x-jet-confirmation-modal>

Как видите, состояние открытия/закрытия модуля определяется свойством wire:model, которое объявлено в компоненте. Это имя свойства должно соответствовать логическому свойству в соответствующем классе PHP вашего компонента Livewire. Содержимое модального окна может быть определено путем использования трех слотов: title, content и footer.

Перевод:
https://jetstream.laravel.com/1.x/stacks/livewire.html

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! ;)