vue3+typescrip通过组件传值实现菜单栏的收缩功能

最近在写一个后台管理的项目，功能实现是收缩菜单栏，如下图

 

以下是点击事件传递参数的代码

<template>
    <div class="header">
        <div class="fold-icon" @click="toggle">
            <el-icon v-if="!sidebarCollapse" :size="24" color="#909399">
                <fold />
            </el-icon>
            <el-icon v-else :size="24" color="#909399">
                <expand />
            </el-icon>
        </div>
    </div>
</template>

<script lang='ts'>
import { defineComponent, onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
export default defineComponent({
    props: {
        sidebarCollapse: {
            type: Boolean,
            default: false,
        },
    },
    emits: ['update:sidebarCollapse'],
    setup(props, { emit }) {
        const router = useRouter()

        // TODO 用户信息变量，后续改成从store获取变量
        const userInfo = reactive({
            baseInfo: {},
        })

        // ↓sidebar折叠/展开的开关
        const toggle = () => {
            // ↓修改父组件值
            emit('update:sidebarCollapse', !props.sidebarCollapse)
        }
        return { userInfo, toggle }
    },
})
</script>

<style scoped lang="scss">
.header {
    display: flex;
    justify-content: space-between;
    // box-shadow: 3px 1px 4px 0px rgba(0, 0, 0, 0.1);

    .fold-icon {
        padding: 11px 13px;
    }
}
</style>

下面是菜单栏接收参数，控制icon变化的代码

<template>
    <div class="sidebar">
        <el-menu default-active="2" class="menu" :collapse="sidebarCollapse">
            <el-menu-item index="1">
                <el-icon>
                    <document />
                </el-icon>
                <span>Navigator Three</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script lang='ts'>
import { defineComponent, inject, onMounted, reactive, ref } from 'vue'
export default defineComponent({
    setup() {
        const sidebarCollapse: any = ref(inject('sidebarCollapse'))
        return {
            sidebarCollapse
        }
    },
})

</script>

<style scoped lang="scss">
.sidebar {
    height: 100vh;
    box-shadow: 2px 0px 6px 0px rgba(0, 0, 0, 0.1);

    .menu {
        border-right: unset;

        .logo {
            height: 50px;
            line-height: 50px;
            padding: 0 10px;
            overflow: hidden;

            img {
                vertical-align: middle;
                margin-left: 6px;
            }

            span {
                font-weight: bold;
                font-size: 16px;
            }
        }
    }

    .menu:not(.el-menu--collapse) {
        width: 240px;
    }
}
</style>

 以下是接收参数控制菜单栏长度变化

<template>
    <el-container>
        <Menu />
        <el-container>
            <el-header height="50px" style="box-shadow: 3px 1px 4px 0px rgba(0, 0, 0, 0.1);">
                <Header v-model:sidebar-collapse="sidebarCollapse" />
            </el-header>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script lang='ts'>
import { defineComponent, ref, provide } from "vue";
import Menu from "@/components/layout/Menu/index.vue";
import Header from "@/components/layout/header/index.vue";
export default defineComponent({
    components: { Menu, Header },
    setup() {
        // ↓侧边栏折叠
        const sidebarCollapse = ref(false)
        // ↓提供给sidebar注入
        provide('sidebarCollapse', sidebarCollapse)

        return {
            sidebarCollapse,
        }
    }
})
</script>

<style scoped lang="scss">
.el-header {
    padding: 0;
}

.el-main {
    text-align: center;
}
</style>