使用整页组件时如何更改页面标题-Livewire答案

【问题标题】：How can I change page title when I use full page components-Livewire使用整页组件时如何更改页面标题-Livewire
【发布时间】：2020-10-05 19:42:51
【问题描述】：

<head>
   <title>dynamic title here - {{ config('app.name') }}</title>
</head>

如果你尝试这个，请告诉我。

【问题讨论】：

【解决方案1】：

我更喜欢将 JavaScript 与 Blade 组件一起使用 document.title = 'My Title'

刀片组件 (.../components/page-title.blade.php)

@props(['title'])

<div x-data x-init="document.title = @js($title.' - '.config('app.name'))"></div>

这样您就可以像这样在刀片的任何位置调用page-title 组件

<x-page-title :title="'Homepage'" />

可能有更简单的方法以 JavaScript 方式进行，但这是我能想到的。希望对你有帮助

PHP 的方式可能是将$title 作为道具传递给布局，例如

<x-guest-layout>
    <x-slot name="title">
       Custom Title
    </x-slot>

    ...Page Content
</x-guest-layout>

guest-layout.blade.php 现在看起来像

<html>
<head>
    <title>{{ $title ?? 'Todo Manager' }}</title>
</head>
<body>
    <h1>Todos</h1>
    <hr/>
    {{ $slot }}
</body>

【讨论】：