Laravel 8 和 TailwindCSS 未定义变量：标题答案

【问题标题】：Laravel 8 and TailwindCSS Undefined variable: headerLaravel 8 和 TailwindCSS 未定义变量：标题
【发布时间】：2021-01-10 15:52:39
【问题描述】：

我是 Laravel 8 和 TailwindCSS 的新手，所以我需要您的帮助来解决以下问题。
我刚刚在资源中创建了一个新文件夹和一个扩展 layouts.app 的刀片文件。当我通过浏览器访问此文件时，出现以下错误：
Undefined variable: header (View: C:\xampp\htdocs\library\resources\views\layouts\app.blade.php) (View: C:\xampp\htdocs\library\resources\views\layouts\app.blade.php).
另一方面，如果我注释掉变量 $header（和 $slot），那么我不会得到我在那个刀片文件中编写的代码。

我的路线代码：

`Route::get('/', function () {
    return view('welcome');
});
Route::post('books', [BooksController::class, 'store']);
Route::patch('books/{book}', [BooksController::class, 'update']);
Route::delete('books/{book}', [BooksController::class, 'destroy']);
Route::get('/authors/create', [AuthorsController::class, 'create']);
Route::post('authors', [AuthorsController::class, 'store']);
Route::post('/checkout/{book}', [CheckoutBookController::class, 'store']);
Route::post('/checkin/{book}', [CheckinBookController::class, 'store']);
Route::middleware(['auth:sanctum', 'verified'])->get('/dashboard', function () {
    return view('dashboard');
})->name('dashboard');`

app.blade 的代码：

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

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

        <!-- Fonts -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">

        <!-- Styles -->
        <link rel="stylesheet" href="{{ asset('css/app.css') }}">

        @livewireStyles

        <!-- Scripts -->
        <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.6.0/dist/alpine.js" defer></script>
    </head>
    <body class="font-sans antialiased">
        <div class="min-h-screen bg-gray-100">
            @livewire('navigation-dropdown')

            <!-- Page Heading -->
            <header class="bg-white shadow">
                <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
                    {{ $header }}
                </div>
            </header>

            <!-- Page Content -->
            <main>
                {{ $slot }}
            </main>
        </div>

        @stack('modals')

        @livewireScripts
    </body>
</html>

最后，新刀片文件的代码创建：

@extends('layouts.app')

@section('content')
    <div class="bg-gray-300 h-screen">
        <h1>ada</h1>
    </div>
@endsection

提前谢谢你，

【问题讨论】：

{{ $header }} 在你的布局文件中添加，所以你需要从每个控制器传递数据或使用 laravel view composer laravel.com/docs/8.x/views#passing-data-to-views
您还需要在新视图中传递$header 数据。

标签： laravel tailwind-css laravel-8

【解决方案1】：

您的代码中似乎使用了 livewire。因此，您需要创建一个 livewire 组件。您可以在此处找到有关如何执行此操作的指南：https://laravel-livewire.com/docs/2.x/making-components。

如果您仔细阅读上面的指南，您最终会得到两个新文件：一个 livewire 组件文件和一个渲染组件的刀片视图文件。然后，您可以将以下内容添加到刀片文件中：

<x-slot name="header">
    <h2 class="font-semibold text-xl text-gray-800 leading-tight">
        {{ __('Page Header') }}
    </h2>
</x-slot>

<div class="bg-gray-300 h-screen">
   <h1>ada</h1>
</div>

第一部分占用标题的插槽，而另一部分占用主插槽。我希望这有助于澄清一些事情。

【讨论】：

我的问题是，系统如何知道要使用哪种布局（因为我们没有指定；例如<x-app-layout>）？
我有同样的问题。它有效，但预计我们也需要设置
@wiwa1978 我想你可以找到答案here。总之，如果您正在创建全页组件，livewire 提供了一种将路由映射到 livewire 组件类的方法。