vue3 el-menu菜单点击展开收缩isCollapse

最新推荐文章于 2025-04-29 11:47:49 发布

前端小云儿

最新推荐文章于 2025-04-29 11:47:49 发布

阅读量681

点赞数

CC 4.0 BY-SA版权

分类专栏： vue3知识点文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/jieweiwujie/article/details/136294054

vue3知识点专栏收录该内容

88 篇文章 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍如何在Vue3中使用el-menu组件，通过点击实现菜单的展开和收缩，同时涉及父组件与子组件间的交互和状态管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 定义小仓库

//定义小仓库
import {
  defineStore
} from "pinia";


//第一个小仓库
let useHomeStore = defineStore('Home', {
  //存储数据user
  state: () => {
    return {
      isCollapse: false,
     
    }
  },
  actions: {
    isCollapseFun() {
      this.isCollapse = !this.isCollapse
    },
    
  },
  getters: {

  }

})

export default useHomeStore

2 绑定

<script setup>
import { appSource } from '../../utils/app.js'
import { Calendar, Timer, TakeawayBox } from '@element-plus/icons-vue'
import { useRouter, useRoute } from 'vue-router'
import { onMounted, ref, watch } from 'vue'
import useHomeStore from '../../stores/modules/home'
let homeStore =

了解本专栏