如何在 Laravel Blade 组件中正确注入 JavaScript 脚本-php教程-PHP中文网

如何在 Laravel Blade 组件中正确注入 JavaScript 脚本

Laravel Blade 的 @push 和 @stack 机制依赖于执行顺序，若在 @component 内部或之后使用 @push，而组件本身未正确继承或渲染 @stack，脚本将无法注入。本文详解两种可靠解决方案：调整指令顺序或升级为组件化架构。

laravel blade 的 `@push` 和 `@stack` 机制依赖于执行顺序，若在 `@component` 内部或之后使用 `@push`，而组件本身未正确继承或渲染 `@stack`，脚本将无法注入。本文详解两种可靠解决方案：调整指令顺序或升级为组件化架构。

在 Laravel 中，@push('scripts')...@endpush 与 @stack('scripts') 的协作必须满足“先声明后注入”的执行逻辑——即 @stack 必须在 DOM 渲染完成前被解析，而所有 @push 块需在其之前定义（注意：不是 HTML 位置靠前，而是模板编译/执行顺序靠前）。

❌ 错误写法：@component 在前，@push 在后

原始代码中，@component 先执行，其内部通过 @yield('content') 渲染 content.blade.php，而 content.blade.php 又 @yield('content') 渲染 all.blade.php 的主体内容。但此时 @push('scripts') 尚未执行，@stack('scripts') 已在 master.blade.php 的

中提前求值完毕，导致脚本丢失。

✅ 方案一：调整指令顺序（推荐初学者使用）

将 @push 块置于 @component 之前，确保脚本在组件渲染前注册到栈中：

{{-- all.blade.php --}}
@push('scripts')
    <script>
        Swal.fire({
            title: 'Do you want to save the changes?',
            showDenyButton: true,
            showCancelButton: true,
            confirmButtonText: 'Save',
            denyButtonText: "Don't save",
        }).then((result) => {
            if (result.isConfirmed) {
                Swal.fire('Saved!', '', 'success');
            } else if (result.isDenied) {
                Swal.fire('Changes are not saved', '', 'info');
            }
        });
    </script>
@endpush

@component('admin.layouts.content', ['title' => 'example file'])
    @slot('breadcrumb')

@endslot

...

@endcomponent

✅ 关键点：@push 必须出现在任何可能触发 @stack 渲染的指令（如 @extends, @component, @include）之前。Laravel 模板引擎会收集所有 @push，并在最终 @stack 执行时一次性输出。

✅ 方案二：采用现代组件化架构（推荐中大型项目）

将传统 @extends/@section 迁移至 Blade 组件，实现更清晰的插槽（slot）控制与脚本注入：

Java JDK 25

Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。

下载

创建 master 组件（resources/views/components/admin/master.blade.php）：
```
 
 {{ $scripts ?? '' }}


 {{ $slot }}
```

创建 content 组件（resources/views/components/admin/layouts/content.blade.php）：

<x-admin.master><scripts>
     {{ $scripts ?? '' }}
 
 {{ $slot }}
</scripts></x-admin.master>

在页面中使用带脚本插槽的组件（all.blade.php）：

<x-admin.layouts.content :title="'example file'"><scripts><script>
         Swal.fire({
             title: 'Do you want to save the changes?',
             showDenyButton: true,
             showCancelButton: true,
             confirmButtonText: 'Save',
             denyButtonText: "Don't save",
         }).then((result) => {
             if (result.isConfirmed) {
                 Swal.fire('Saved!', '', 'success');
             } else if (result.isDenied) {
                 Swal.fire('Changes are not saved', '', 'info');
             }
         });
     </script><breadcrumb><li class="breadcrumb-item active">Example File</li>
 

 <div>页面主体内容...</div>
</breadcrumb></scripts></x-admin.layouts.content>

⚠️ 注意事项

@push/@stack 是全局作用域机制，不支持嵌套组件内局部作用域；若多个组件均 @push('scripts')，所有脚本将合并输出，需自行管理执行时机（如用 document.addEventListener('DOMContentLoaded', ...) 包裹）。
使用组件插槽方案时，务必确保 Swal 已在页面中加载（例如在 master.blade.php 或 app.js 中引入 SweetAlert2）。
生产环境建议将 JS 逻辑抽离为独立文件，通过 @vite 或 @mix 加载，而非内联脚本，以提升可维护性与缓存效率。

通过以上任一方案，即可确保 JavaScript 代码可靠注入并执行，彻底解决 @push 失效问题。