如何在VUE3中的另一个标头组件中使用sidenavbar切换函数

Question

我正在使用inertia.js在laravel 9中使用vue3，我正在尝试创建一个带有标题的侧翼。

我想在标题组件中使用“菜单”按钮切换Sidenavbar。 但是我不知道如何在标题中使用Sidenavbar的切换功能。

Sidenavbar中的切换功能正常。

标头和侧栏

截图

<template>
     <Header />
    <div class="app">
        <Nav />
        <slot />
    </div>
</template>
<script>
import Nav from "./Nav";
import Header from "./header.vue";
export default {
    components: { Nav, Header },
};

</script>

带

<template>
    <aside :class="`${is_expanded ? '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="ToggleMenu">
                <span class="material-symbols-outlined menu-icon">menu</span>
                <span class="material-symbols-outlined arrow-back">arrow_back</span>
            </button>
        </div>



    </aside>
</template>


<script >

import {ref} from 'vue'

export default {
    data() {
        return {
            is_expanded: ref(localStorage.getItem("is_expanded") === "true"),
            visible: false
        };
    },
    methods: {
        ToggleMenu() {
            this.is_expanded = !this.is_expanded;
            localStorage.setItem("is_expanded", this.is_expanded);
        }
    },
    mounted() {
        console.log(`The initial count is ${this.is_expanded}.`);
    }

}

</script>

屏幕

<template>



<div class=" header border-2">
        <div class="menu-toggle-wrap">
            <button class="menu-toggle" @click="">
                <span class="material-symbols-outlined menu-icon">menu</span>

            </button>
        </div>

</div>

</template>

<script>
export default {

}
</script>

的 我的app.js文件

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'

export const toggleMenu = new Vue();

createInertiaApp({
  resolve: name => require(`./pages/${name}`),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})