如何在Laravel Blade的父子Bootstrap模态框之间传递变量

首先明确基础逻辑：Blade是服务端预渲染模板，页面加载完成后所有Blade变量已经解析为静态内容，动态传递运行时产生的参数有两种常用实现方式：

方案1：前端DOM直接传值（无额外接口，最简单） #

适合子模态框不需要根据传值做服务端渲染的场景，仅前端展示/使用参数。

步骤1：修改子模态框 modal_2.blade.php 预留值的接收位置 #

<div class="modal" id="modal2">
    <!-- 预留展示位置，添加唯一ID标识 -->
    <p>选中的颜色值为：<span id="selectedColorDisplay"></span></p>
    <!-- 其他模态框内容 -->
</div>
<!-- 如果子模态框内部需要使用传过来的参数，可直接读取DOM属性/内容 -->
<script>
// 子模态框内获取传入的color值示例
document.getElementById('modal2').addEventListener('shown.bs.modal', function () {
  const currentColor = document.getElementById('selectedColorDisplay').textContent;
  // 也可以存在模态框的data属性里统一管理：const currentColor = this.dataset.selectedColor;
  console.log('拿到的color值：', currentColor);
})
</script>

步骤2：修改父模态框的传值逻辑 #

首先修正原有按钮的Blade变量输出格式，字符串类型参数需要加引号包裹：

<button onclick="previewItem('{{ $templates[$key]['color'] }}')">
  预览
</button>

然后完善previewItem函数，赋值后弹出子模态框：

const previewItem = (color) => {
    // 给子模态框的展示元素赋值
    document.getElementById('selectedColorDisplay').textContent = color;
    // 也可以将值存在子模态框的data属性里，方便全局取用
    document.getElementById('modal2').dataset.selectedColor = color;
    // Bootstrap 5 弹出模态框写法，Bootstrap 4 对应改为 $('#modal2').modal('show') 即可
    const modal2 = new bootstrap.Modal(document.getElementById('modal2'));
    modal2.show();
}

方案2：异步渲染子模态框（适合需要服务端处理参数的场景） #

如果子模态框需要根据传入的color值查询数据库、做服务端逻辑渲染，就用该方案。

步骤1：新增路由返回渲染后的子模态框内容 #

在routes/web.php中添加路由：

Route::get('/render-modal2/{color}', function (string $color) {
    // 这里可以做任意服务端逻辑，比如查询对应颜色的模板数据
    return view('modal_2', compact('color'));
})->name('render.modal2');

步骤2：子模态框直接使用Blade变量 #

modal_2.blade.php中直接读取服务端传入的Blade变量即可：

<div class="modal" id="modal2">
    <p>选中的颜色值为：{{ $color }}</p>
    <!-- 可以用$color做任意服务端渲染逻辑，比如遍历对应颜色的商品列表 -->
    @foreach(\App\Models\Goods::where('color', $color)->get() as $goods)
        <p>{{ $goods->name }}</p>
    @endforeach
</div>

步骤3：父模态框异步拉取渲染后的子模态框 #

const previewItem = async (color) => {
    // 请求接口获取渲染好的子模态框内容
    const res = await fetch(`/render-modal2/${encodeURIComponent(color)}`);
    const modalHtml = await res.text();
    // 插入到页面中，避免重复插入先删除已存在的子模态框
    if (document.getElementById('modal2')) {
        document.getElementById('modal2').remove();
    }
    document.body.insertAdjacentHTML('beforeend', modalHtml);
    // 弹出模态框
    const modal2 = new bootstrap.Modal(document.getElementById('modal2'));
    modal2.show();
}

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