Laravel Blade点击切换组件实现及JS变量管理咨询

Blade 是服务端渲染模板，@if 在页面加载时就已执行完毕，无法直接通过前端 JS 变量动态切换组件。下面提供两种基础实现思路，同时解答 JS 变量的存储与访问方法。

一、AJAX 动态加载组件（原生前端方案） #

核心思路是通过后端接口返回对应组件的 HTML 内容，再用 JS 插入到目标区域。

1. 后端配置路由与返回逻辑 #

在 routes/web.php 添加路由，用于返回指定组件的渲染结果：

Route::get('/load-component/{name}', function ($name) {
    // 校验组件名称，防止非法请求
    $allowedComponents = [
        'klanten-brillen',
        'bestellingen-overzicht',
        'klanten-overzicht'
    ];

    if (!in_array($name, $allowedComponents)) {
        abort(404);
    }

    // 返回组件视图的 HTML
    return view("components.$name");
});

假设你的 Blade 组件文件存放在 resources/views/components/ 目录下（如 klanten-brillen.blade.php）。

2. 前端 HTML 改造 #

给每个可点击项添加 data-component 属性绑定对应组件名，同时给目标区域加 ID 方便定位：

<section class="grid">
    <div class="gridFirst">
        <h1 class="gridTitle">VIPDECK</h1>
        <div>
            <div class="firstgridItem" data-component="klanten-brillen" id="koppelen-link">
                <p>BRIL KOPPELEN</p>
                <p>>></p>
            </div>
            <div class="firstgridItem" data-component="bestellingen-overzicht" id="bestellingen-link">
                <p>OVERZICHT BESTELLINGEN</p>
                <p>>></p>
            </div>
            <div class="firstgridItem" data-component="klanten-overzicht" id="klanten-link">
                <p>OVERZICHT KLANTEN</p>
                <p>>></p>
            </div>
        </div>
    </div>
    <div class="gridMid" id="grid-mid"></div>
    <div class="gridLast" id="grid-last"></div>
</section>

3. JS 交互逻辑 #

用原生 JS 或 axios 处理点击事件，请求后端接口并更新页面内容：

// 给所有可点击项绑定事件
document.querySelectorAll('.firstgridItem').forEach(item => {
    item.addEventListener('click', async function() {
        const componentName = this.dataset.component;
        
        // 存储当前选中的组件名（可选，用于页面刷新后恢复状态）
        localStorage.setItem('currentComponent', componentName);

        try {
            // 请求后端获取组件 HTML
            const response = await fetch(`/load-component/${componentName}`);
            const html = await response.text();
            
            // 更新目标区域内容
            document.getElementById('grid-mid').innerHTML = html;
            document.getElementById('grid-last').innerHTML = html; // 可根据需求修改为不同组件
        } catch (error) {
            console.error('组件加载失败:', error);
        }
    });
});

// 页面加载时自动恢复上次选中的组件（可选）
window.addEventListener('load', () => {
    const savedComponent = localStorage.getItem('currentComponent');
    if (savedComponent) {
        document.querySelector(`[data-component="${savedComponent}"]`).click();
    } else {
        // 默认加载第一个组件
        document.querySelector('.firstgridItem').click();
    }
});

二、JS 变量的存储与访问方法 #

1. 局部作用域变量（推荐） #

用函数包裹变量，避免污染全局作用域：

(function() {
    let activeComponent = 'klanten-brillen';

    // 修改变量
    function setActiveComponent(name) {
        activeComponent = name;
    }

    // 获取变量
    function getActiveComponent() {
        return activeComponent;
    }

    // 点击时更新变量
    document.querySelectorAll('.firstgridItem').forEach(item => {
        item.addEventListener('click', function() {
            setActiveComponent(this.dataset.component);
            console.log(getActiveComponent());
        });
    });
})();

2. 本地存储（持久化/会话级存储） #

• localStorage：数据持久保存，关闭浏览器后仍存在
• sessionStorage：仅当前会话有效，关闭标签页即清除

// 存储
localStorage.setItem('activeComponent', 'klanten-brillen');
// 获取
const component = localStorage.getItem('activeComponent');
// 删除
localStorage.removeItem('activeComponent');

3. DOM 数据集（与元素绑定） #

通过 data-* 属性存储和读取与 DOM 元素关联的数据：

<div class="firstgridItem" data-component="klanten-brillen"></div>

const component = document.querySelector('.firstgridItem').dataset.component;

4. 全局变量（不推荐） #

直接在全局作用域声明，容易和其他脚本冲突，仅用于简单场景：

let activeComponent = 'klanten-brillen';
// 修改
activeComponent = 'bestellingen-overzicht';
// 访问
console.log(activeComponent);

三、可选方案：Laravel Livewire（原生后端交互） #

如果不想写过多前端代码，可使用 Livewire 实现响应式组件切换：

1. 安装 Livewire #

composer require livewire/livewire

2. 创建 Livewire 组件 #

php artisan make:livewire ComponentSwitcher

3. 编写组件逻辑（app/Http/Livewire/ComponentSwitcher.php） #

namespace App\Http\Livewire;

use Livewire\Component;

class ComponentSwitcher extends Component
{
    public $activeComponent = 'klanten-brillen';

    public function switchComponent($name) {
        $allowed = ['klanten-brillen', 'bestellingen-overzicht', 'klanten-overzicht'];
        if (in_array($name, $allowed)) {
            $this->activeComponent = $name;
        }
    }

    public function render() {
        return view('livewire.component-switcher');
    }
}

4. 编写组件视图（resources/views/livewire/component-switcher.blade.php） #

<section class="grid">
    <div class="gridFirst">
        <h1 class="gridTitle">VIPDECK</h1>
        <div>
            <div class="firstgridItem" wire:click="switchComponent('klanten-brillen')" id="koppelen-link">
                <p>BRIL KOPPELEN</p>
                <p>>></p>
            </div>
            <div class="firstgridItem" wire:click="switchComponent('bestellingen-overzicht')" id="bestellingen-link">
                <p>OVERZICHT BESTELLINGEN</p>
                <p>>></p>
            </div>
            <div class="firstgridItem" wire:click="switchComponent('klanten-overzicht')" id="klanten-link">
                <p>OVERZICHT KLANTEN</p>
                <p>>></p>
            </div>
        </div>
    </div>
    <div class="gridMid">
        @if($activeComponent === 'klanten-brillen')
            <x-klanten-brillen />
        @elseif($activeComponent === 'bestellingen-overzicht')
            <x-bestellingen-overzicht />
        @elseif($activeComponent === 'klanten-overzicht')
            <x-klanten-overzicht />
        @endif
    </div>
    <div class="gridLast">
        <!-- 可根据需求设置不同组件 -->
        @if($activeComponent === 'klanten-brillen')
            <x-klanten-brillen />
        @elseif($activeComponent === 'bestellingen-overzicht')
            <x-bestellingen-overzicht />
        @elseif($activeComponent === 'klanten-overzicht')
            <x-klanten-overzicht />
        @endif
    </div>
</section>

5. 在父视图中引入组件 #

@livewire('component-switcher')

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