Livewire 中文文档

主题

#[Layout] ​

#[Layout] 属性指定全页组件应使用哪个 Blade 布局，允许你在每个组件的基础上自定义布局。

基本用法 ​

将 #[Layout] 属性应用于全页组件以使用特定布局：

php
<?php // resources/views/pages/posts/⚡index.blade.php

use Livewire\Attributes\Layout;
use Livewire\Attributes\Computed;
use Livewire\Component;
use App\Models\Post;

new #[Layout('layouts::dashboard')] class extends Component { // [tl! highlight]
    #[Computed]
    public function posts()
    {
        return Post::all();
    }
};
?>

<div>
    <h1>Posts</h1>
    @foreach ($this->posts as $post)
        <div wire:key="{{ $post->id }}">{{ $post->title }}</div>
    @endforeach
</div>

此组件将使用 resources/views/layouts/dashboard.blade.php 布局而不是默认布局进行渲染。

默认布局 ​

默认情况下，Livewire 使用 config/livewire.php 文件中指定的布局：

php
'layout' => 'layouts::app',

#[Layout] 属性为特定组件覆盖此默认值。

向布局传递数据 ​

你可以使用数组语法向布局传递额外数据：

php
new #[Layout('layouts::dashboard', ['title' => 'Posts Dashboard'])] class extends Component { // [tl! highlight]
    // ...
};

在你的布局文件中，$title 变量将可用：

blade
<!DOCTYPE html>
<html>
<head>
    <title>{{ $title ?? 'My App' }}</title>
</head>
<body>
    {{ $slot }}
</body>
</html>

替代方案：使用 layout() 方法 ​

除了属性，你可以在 render() 方法中使用 layout() 方法：

php
<?php // resources/views/pages/posts/⚡index.blade.php

use Livewire\Component;

new class extends Component {
    public function render()
    {
        return view('livewire.posts.index')
            ->layout('layouts::dashboard', ['title' => 'Posts']); // [tl! highlight]
    }
};

对于不需要 render() 方法的单文件组件，属性方法更简洁。

每个页面使用不同布局 ​

一个常见的模式是为应用程序的不同部分使用不同的布局：

php
// Admin pages
new #[Layout('layouts::admin')] class extends Component { }

// Marketing pages
new #[Layout('layouts::marketing')] class extends Component { }

// Dashboard pages
new #[Layout('layouts::dashboard')] class extends Component { }

何时使用 ​

在以下情况使用 #[Layout]：

  • 应用程序中有多个布局（管理员、营销、仪表板等）
  • 特定页面需要与默认不同的布局
  • 你正在构建全页组件（不是常规组件）
  • 你想将布局配置保持在组件定义附近

仅适用于全页组件

#[Layout] 属性仅适用于全页组件。在其他视图中渲染的常规组件不使用布局。

了解更多 ​

有关全页组件和布局的更多信息，请参阅页面文档。

参考 ​

php
#[Layout(
    string $name,
    array $params = [],
)]
参数类型默认值描述
$namestring必需要使用的 Blade 布局名称
$paramsarray[]传递给布局的额外数据