【学习打卡】第2天 伸缩菜单交互实现

课程名称：基于Vue3+Vite+TS，二次封装element-plus业务组件

课程章节：封装组件初级篇（上）

主讲老师：五月的夏天

课程内容：

今天学习的内容包括：

2-4 伸缩菜单-完成伸缩菜单基本功能——基于element-plus，搭建基础布局，左侧菜单收缩/展开效果。

2-5 伸缩菜单-抽离头部和侧边栏组件并完善伸缩菜单——将代码抽离封装成组件，模块化便于维护。

课程收获：

基于element-plus，搭建基础布局，使用UI框架可以帮助我们快速开发和维护。

1、使用Container 布局容器快速搭建左侧导航，右侧header和主内容区域

<el-container>
    <el-aside width="200px">Aside</el-aside>
   <el-container>
       <el-header>Header</el-header>
       <el-main>Main</el-main>
   </el-container>
</el-container>

2、使用Menu 菜单和Collapse 折叠面板搭可收缩展开导航

<el-menu
  default-active="2"
  class="el-menu-vertical-demo"
  :collapse="collapse"
>
  <el-menu-item index="1">
    <el-icon><el-icon-menu /></el-icon>
    <span>首页</span>
  </el-menu-item>
  <el-menu-item index="2">
    <el-icon><el-icon-document /></el-icon>
    <span>图标选择器</span>
  </el-menu-item>
  <el-menu-item index="3">
    <el-icon><el-icon-setting /></el-icon>
    <span>趋势标记</span>
  </el-menu-item>
</el-menu>

3、将左侧side和右侧header抽离封装组件便于维护

<el-container>
  <el-container>
    <el-aside width="auto">
      <NavSide v-model:collapse="isCollapse"/>
    </el-aside>
    <el-container>
      <el-header>
        <NavHeader v-model:collapse="isCollapse"/>
      </el-header>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</el-container>

使用element-plus框架进行开发，很方便很快速。

学到了一个好方法：子组件更新父组件中数据

在父组件中使用v-model

<NavHeader v-model:collapse="isCollapse"/>

在子组件中使用emit+update

let props = defineProps<{
  collapse: boolean
}>()
let emits = defineEmits(['update:collapse'])
const toggle = () => {
  emits('update:collapse',!props.collapse)
}

我之前都是emit到父组件使用函数进行修改，跟emit+update相比，之前的方法过于繁琐和不便于维护。

学习到了一个自动引入组件的方法：volar

在vscode中安装volar插件在写组件名称时可以自动引入对用的组件，非常便捷。

在查询资料发现：unplugin-vue-components 和 unplugin-auto-import这两款插件好像能自动引入，便于在其他编译器中开发，以后尝试下。

坚持打卡，坚持学习，未来可期，加油😀。