РЕПЕТИТОР математика физика информатика
Для школьников и студентов. Подтягивание пробелов. ЦЭ, ЦТ, ОГЭ, ЕГЭ.
Идет набор на ЛЕТО. Жмите для подробностей:)
117 of 274 menu

Метод component

Метод component класса Livewire позволяет динамически создавать экземпляры компонентов Livewire в PHP-коде. Он принимает имя компонента и параметры, возвращает объект компонента. Это полезно для программного создания компонентов в контроллерах, других компонентах или сервисных классах.

Метод имеет следующий синтаксис:

<?php Livewire::component('component-name', ['param' => 'value']) ?>

Синтаксис

<?php Livewire::component('component-name', ['param' => 'value']) ?>

Параметры метода:

  • string $name - имя компонента в формате 'folder.component'
  • array $params - массив параметров, передаваемых в компонент (необязательно)

Метод возвращает экземпляр класса LivewireComponent.

Пример

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

<?php namespace AppLivewire; use LivewireComponent; class Counter extends Component { public $initial = 0; public $num = 0; public function mount($initial = 0) { $this->initial = $initial; $this->num = $initial; } public function inc() { $this->num++; } public function render() { return view('livewire.counter'); } } ?>
<div> <button wire:click="inc">+</button> <span>{{ $num }}</span> </div>

Теперь создадим контроллер, в котором динамически создадим компонент:

<?php namespace AppHttpControllers; use LivewireLivewire; class HomeController extends Controller { public function index() { $component = Livewire::component('counter', ['initial' => 10]); return view('home', ['component' => $component]); } } ?>
<div> <h1>Dynamic component</h1> {!! $component !!} </div>

Результат выполнения кода:

<div> <h1>Dynamic component</h1> <div> <button>+</button> <span>10</span> </div> </div>

Пример

Давайте создадим компонент с несколькими параметрами и отобразим его в другом компоненте:

<?php namespace AppLivewire; use LivewireComponent; class UserCard extends Component { public $name; public $age; public $city; public function mount($name, $age, $city = 'Moscow') { $this->name = $name; $this->age = $age; $this->city = $city; } public function render() { return view('livewire.user-card'); } } ?>
<div> <h3>{{ $name }}</h3> <p>Age: {{ $age }}</p> <p>City: {{ $city }}</p> </div>
<?php namespace AppLivewire; use LivewireComponent; use LivewireLivewire; class UserList extends Component { public $users = [ ['name' => 'John', 'age' => 25, 'city' => 'New York'], ['name' => 'Jane', 'age' => 30, 'city' => 'London'], ['name' => 'Mike', 'age' => 28, 'city' => 'Paris'], ]; public function render() { $cards = []; foreach ($this->users as $user) { $cards[] = Livewire::component( 'user-card', [ 'name' => $user['name'], 'age' => $user['age'], 'city' => $user['city'], ] ); } return view('livewire.user-list', ['cards' => $cards]); } } ?>
<div> <h2>Users</h2> @foreach ($cards as $card) {!! $card !!} @endforeach </div>

Результат выполнения кода:

<div> <h2>Users</h2> <div> <h3>John</h3> <p>Age: 25</p> <p>City: New York</p> </div> <div> <h3>Jane</h3> <p>Age: 30</p> <p>City: London</p> </div> <div> <h3>Mike</h3> <p>Age: 28</p> <p>City: Paris</p> </div> </div>

Пример

Использование метода component для получения HTML представления компонента в виде строки:

<?php namespace AppHelpers; use LivewireLivewire; class ComponentHelper { public static function renderComponent($name, $params = []) { $component = Livewire::component($name, $params); return $component->render()->render(); } } ?>
<?php namespace AppHttpControllers; use AppHelpersComponentHelper; class ComponentController extends Controller { public function show() { $html = ComponentHelper::renderComponent( 'counter', ['initial' => 5] ); return response($html); } } ?>

Результат выполнения кода:

"<div><button>+</button><span>5</span></div>"

Смотрите также

  • класс Livewire,
    который содержит статические методы для работы с компонентами
  • метод render,
    который возвращает шаблон компонента
  • метод directive,
    который создает директивы Livewire
  • метод intercept,
    который перехватывает выполнение действий компонента
Мы используем cookie для работы сайта, аналитики и персонализации. Обработка данных происходит согласно Политике конфиденциальности.
принять все настроить отклонить