如何实现app所有页面都可访问的alpine组件？

Question

在我的 Laravel 8/apline 2.8/tailwindcss 2 应用程序中我想制作必须在网站的所有页面上都可以访问的高山组件，我想为此使用页脚我的 resources/views/layouts/app.blade.php 具有结构：

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    ...
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    ...
</head>


<body class="flex flex-col min-h-screen">
    <header class="h-14 bg-red">
        @include('layouts.header')
    </header>
    <main class="flex-1">
        @yield('content')
        @yield('scripts')

    </main>
    <footer class="h-8 bg-green">
        @include('layouts.footer')
    </footer>
</body>

</html>

但是试图在 resources/views/layouts/footer 中实现页脚组件。blade.php :

    <div class="m-0 p-0">

        <div class="flex w-full p-0 m-0 content-center justify-between md:w-1/2 md:justify-end" x-data="adminFooterComponent()">
           ...

        </div>
    </div>


@section('scripts')

    <script>

        function adminFooterComponent() {
            console.log('adminFooterComponent::')

            return {
                addDonationOpen: false,
            }
        } // function adminFooterComponent() {

    </script>

@endsection

我收到错误：

Uncaught ReferenceError: adminFooterComponent is not defined

我想我收到这个错误是因为我没有将页脚换行（就像我在所有页面上所做的那样）

@section('content')
   ...
@endsection

节。但我真的不需要它，因为 resources/views/layouts/footer.blade.php 是一个部分文件。

如何实现应用所有页面都可访问的alpine组件？

谢谢！

Answer 1

我认为问题出现是因为该部分包含在页脚中。要解决此问题，我们可以在实际视图中包含该部分，或者我们可以将其包含在布局文件本身中。

方法 1 - 在 blade 文件中

@extends('layouts.app')

@section('content')
    ......
@endsection


@section('scripts')

<script>
    function adminFooterComponent() {
            console.log('adminFooterComponent::')
            return {
                addDonationOpen: false,
            }
        }
</script>

@endsection

方法 2 - 在布局文件中（直接）app.blade.php

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

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

    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js" defer></script>
</head>


<body class="flex flex-col min-h-screen">
    <main class="flex-1">
        @yield('content')
    </main>
    <footer class="h-8 bg-green">
        @include('layouts.footer')
    </footer>

    <script>
        function adminFooterComponent() {
                console.log('adminFooterComponent::')
                return {
                    addDonationOpen: false,
                }
            }
    </script>
</body>

直接的解决方案是方法 2，这样代码就不会被复制。

如何实现app所有页面都可访问的alpine组件？

How to implement alpine component accessible on all pages of the app?

laravel

alpine.js