Laravel 10 无法向App Layout组件传递Props的问题求助

我有以下Laravel组件代码：

AppLayout.php #

<?php

namespace App\View\Components;

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

class AppLayout extends Component
{
    public function __construct(
        public bool $header = false,
    ) {
    }


    /**
     * Get the view / contents that represents the component.
     */
    public function render(): View
    {
        return view('layouts.app');
    }
}

views/layouts/app.blade.php #

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full">
    <head>
        <meta charset="utf-8">

        <meta name="application-name" content="{{ config('app.name') }}">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>{{ config('app.name') }}</title>

        <style>
            [x-cloak] {
                display: none !important;
            }
        </style>

        @vite('resources/css/app.css')
        @livewireStyles
    </head>

    <body class="antialiased h-full flex flex-col">
        @if ($header)
            <header>foo</header>
        @endif

        <main class="flex-grow">{{ $slot }}</main>

        @vite('resources/js/app.js')
        @livewireScripts
    </body>
</html>

我想通过如下方式给布局组件传递header属性，但尝试了Laravel官方文档里的方法都无效：

some-page.blade.php

<x-app-layout :header="true">
  ...带头部的页面内容...
</x-app-layout>

你的代码写法本身是正确的，问题大概率出在以下几个环节，逐一排查即可：

• 组件未正确注册
  确保组件已被Laravel识别，可在AppServiceProvider的boot方法中手动注册：

  // app/Providers/AppServiceProvider.php
  public function boot()
  {
      \Illuminate\Support\Facades\Blade::component('app-layout', \App\View\Components\AppLayout::class);
  }
  

  或者在config/view.php的components数组里添加对应映射：

  'components' => [
      'app-layout' => \App\View\Components\AppLayout::class,
  ],
  

• 视图缓存干扰
  执行命令清除视图缓存，避免旧缓存影响：

  php artisan view:clear
  

  必要时可清除所有缓存确保生效：

  php artisan cache:clear
  

• 语法或拼写错误
  检查属性名是否拼写正确（Laravel组件属性大小写敏感），你使用的:header="true"是正确的表达式绑定写法，若传递字面量布尔值，也可直接写header="true"，两种写法都有效。

• 构造函数属性访问
  你的构造函数已将$header声明为公共属性，布局视图中直接使用$header的写法没问题，无需额外处理。

完成以上步骤后，页面就能根据header属性的值正常显示或隐藏头部了。

内容的提问来源于stack exchange，提问作者Vivere