Пропсы страницы в Inertia

Давайте изучим такое понятие, как пропсы. Пропсы представляют собой данные страницы, которые сервер передаёт компоненту Vue. Это заголовок, имя или число: всё, что относится к открытому адресу и не зашито в файле компонента.

Текст, записанный в шаблон, при любом заходе один и тот же. Пропсы приходят вместе с ответом сервера и для другого адреса могут быть другими. Метод render кладёт их вторым аргументом - массивом имён и значений. Клиент забирает эти значения из ответа и отдаёт их компоненту, который рисует экран.

Компонент сам называет, какие данные он ждёт. В начале файла вызывают defineProps и указывают имя и тип. В шаблоне это имя пишут как обычное значение Vue, и на экране оказывается то, что пришло с сервера. Имя в массиве и имя в объявлении должны совпадать, иначе компоненту нечего вывести.

Давайте опишем маршрут страницы и передадим на неё заголовок:

<?php
	use Illuminate\Support\Facades\Route;
	use Inertia\Inertia;

	Route::get('/posts', function () {
		return Inertia::render('Posts/Index', [
			'title' => 'News',
		]);
	});
?>

Давайте создадим компонент. Он объявит заголовок и выведет его на экран:

<script setup>
	defineProps({
		title: String,
	})
</script>

<template>
	<h1>{{ title }}</h1>
</template>

Сделайте страницу работника, чтобы по адресу /workers на экране было имя, которое пришло с сервера.