Vue3(Laravel9+Inertia.js)中如何在Header组件调用侧边栏toggle方法

针对Laravel 9 + Inertia.js + Vue3 项目中，顶部Header组件的Menu按钮控制侧边栏Nav展开/收起的需求，由于Header和Nav同属Layout/App.vue的直接子组件，最规范、维护成本最低的方案是状态提升：将侧边栏的展开状态、切换方法统一放到共同父组件App.vue中管理，再通过Props、自定义事件向两个子组件传递状态和触发方法即可，不需要额外引入第三方依赖。

步骤1：修改父组件 Layout/App.vue #

将原本存在Nav.vue里的is_expanded状态和切换逻辑移到父组件，同时向两个子组件分别绑定对应的属性和事件：

<template>
    <!-- 给Header绑定切换事件 -->
    <Header @toggle-sidebar="ToggleMenu" />
    <div class="app">
        <!-- 给Nav传递展开状态，绑定切换事件 -->
        <Nav :is-expanded="is_expanded" @toggle-sidebar="ToggleMenu" />
        <slot />
    </div>
</template>
<script>
import Nav from "./Nav";
import Header from "./header.vue";
export default {
    components: { Nav, Header },
    data() {
        return {
            // 初始化时直接读取localStorage存储的状态，不需要额外包ref（Options API的data本身具备响应性）
            is_expanded: localStorage.getItem("is_expanded") === "true"
        };
    },
    methods: {
        ToggleMenu() {
            this.is_expanded = !this.is_expanded;
            localStorage.setItem("is_expanded", this.is_expanded);
        }
    }
};
</script>

步骤2：修改侧边栏组件 Nav.vue #

移除组件内部自有的状态和toggle方法，改为接收父组件传递的props，侧边栏自带的切换按钮直接触发父组件的切换事件即可：

<template>
    <aside :class="`${isExpanded ? 'is-expanded' : ''}`">
        <h3>Menu</h3>
        <div class="menu">
            <router-link to="/" class="button">
                <span class="material-symbols-rounded">home</span>
                <span class="text">Home</span>
            </router-link>
            <router-link to="/about" class="button">
                <span class="material-symbols-rounded">description</span>
                <span class="text">About</span>
            </router-link>
            <router-link to="/team" class="button">
                <span class="material-symbols-rounded">group</span>
                <span class="text">Team</span>
            </router-link>
            <router-link to="/contact" class="button">
                <span class="material-symbols-outlined">admin_panel_settings</span>
                <span class="text">Administration</span>
            </router-link>
        </div>

        <div class="flex"></div>

        <div class="menu">
            <router-link to="/settings" class="button ">
                <span class="material-symbols-rounded">settings</span>
                <span class="text">Settings</span>
            </router-link>
        </div>

        <div class="menu-toggle-wrap">
            <!-- 点击触发父组件的切换事件 -->
            <button class="menu-toggle" @click="$emit('toggle-sidebar')">
                <span class="material-symbols-outlined menu-icon">menu</span>
                <span class="material-symbols-outlined arrow-back">arrow_back</span>
            </button>
        </div>
    </aside>
</template>

<script>
export default {
    // 接收父组件传递的展开状态
    props: {
        isExpanded: {
            type: Boolean,
            required: true
        }
    }
}
</script>

注意：HTML属性不支持驼峰命名，父组件传参时写短横线分隔的:is-expanded，子组件props接收时用驼峰格式isExpanded即可自动映射。

步骤3：修改顶部栏组件 Header.vue #

给菜单按钮绑定点击事件，触发父组件传递的切换事件：

<template>
    <div class="header border-2">
        <div class="menu-toggle-wrap">
            <!-- 点击触发父组件的切换事件 -->
            <button class="menu-toggle" @click="$emit('toggle-sidebar')">
                <span class="material-symbols-outlined menu-icon">menu</span>
            </button>
        </div>
    </div>
</template>

<script>
export default {}
</script>

其他可选方案说明 #

如果后续组件层级变深，逐层传递props过于繁琐，可以选择以下两种方案：

• 使用Vue3内置的provide/inject：在App.vue中通过provide配置暴露侧边栏状态和切换方法，任意层级的子组件都可以通过inject直接获取调用，不需要逐层传递props
• 引入Pinia状态管理：如果项目后续有更多全局状态需要共享，可以将侧边栏展开状态定义为全局store，任意组件都可以直接读取状态、调用修改方法，适合中大型项目

注意：原app.js中写的export const toggleMenu = new Vue()是Vue2的事件总线写法，Vue3已经移除了Vue实例上的$on/$off等事件方法，这段代码在Vue3环境下无法正常运行，不建议继续使用。

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