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

最新推荐文章于 2024-09-11 13:02:07 发布

前端小云儿

最新推荐文章于 2024-09-11 13:02:07 发布

阅读量364

点赞数

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

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

版权

vue3知识点专栏收录该内容

87 篇文章 2 订阅 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

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

摘要由CSDN通过智能技术生成

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 =

了解本专栏