Laravel 10 向 App 布局传递属性的两种方法：依赖注入 vs 显式传递

2024-03-02 13:55:43

在 Laravel 10 中向 App 布局传递属性

在 Laravel 10 中，App 布局是应用程序所有页面的基础。它通常包含网站的导航、页脚和任何其他全局元素。有时，我们需要向 App 布局传递一些属性，例如是否显示页眉或页脚。本文将探讨两种向 Laravel 10 App 布局传递属性的方法：依赖注入和显式传递。

依赖注入

依赖注入是一种设计模式，它允许我们在组件的构造函数中传递依赖项。对于 App 布局，我们可以通过在构造函数中声明 bool 类型属性，然后在页面视图中使用 x-data 属性传递属性，将属性注入到 App 布局中。

在 AppLayout.php 中，我们的组件将如下所示：

<?php

namespace App\View\Components;

use Illuminate\View\Component;
use Illuminate\View\View;

class AppLayout extends Component
{
    public bool $header;

    public function __construct(bool $header)
    {
        $this->header = $header;
    }

    public function render(): View
    {
        return view('layouts.app', ['header' => $this->header]);
    }
}

在页面视图（例如 some-page.blade.php）中，我们可以使用 x-data 属性传递属性：

<x-app-layout x-data="{ header: true }">
  ...content in a page with header...
</x-app-layout>

显式传递

显式传递方法涉及在 AppLayout 组件上使用 : 符号直接传递属性。这是一种更加简单的方法，不需要依赖注入。

在 some-page.blade.php 中，我们的代码如下所示：

<x-app-layout :header="true">
  ...content in a page with header...
</x-app-layout>

在 AppLayout.php 中，我们可以通过 $attributes 属性访问传递的属性：

<?php

namespace App\View\Components;

use Illuminate\View\Component;
use Illuminate\View\View;

class AppLayout extends Component
{
    public bool $header;

    public function __construct()
    {
        $this->header = false;
    }

    public function render(): View
    {
        return view('layouts.app', ['header' => $this->header]);
    }
}