0

我是 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>

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

@extends('layouts.app')

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

先感谢您，

4

1 回答 1

2

看来您在代码中使用了 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>

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

于 2020-10-28T10:01:58.937 回答