书架

## 前言 经常的，我们在日常工作中，会使用第三方UI组件库，比如：element-ui、vant-ui、iview、ant-design等等。不管是为了业务考虑还是单纯的为了提高效率，我们会把一些经常用到的组件抽离、封装成公共组件，这样方便我们在不同的地方使用这个组件，减少重复代码的编写。 我们把对于第三方组件库的封装称为组件的二次封装，那么这带来有个思考，当我们在二次封装时，我们在封装什么？ <!--more--> ## 二次封装时，我们需要遵循什么？ 在 vue 组件封装时，我们需要注意的主要是三部分：prop、event、slot。 - prop：表

> vue3相比vue2对ts拥有更友好的支持，当初在用vue2写ts时各种装饰器，现在只要使用`<script setup lang="ts"></script>`标签就可以直接使用ts。 <!--more--> # 1. ref 传入一个泛型参数 ## 1.值 ref ```js // 默认推导出string类型 const initCode = ref('200'); // 或者手动定义更复杂的类型 const initCode = ref<string | number>('200'); ``` ## 2.模板 ref ```j

> Element Plus 2.2.0 版本开始支持暗黑模式，启用方式参考 [Element Plus 官方文档 - 暗黑模式](https://element-plus.gitee.io/zh-CN/guide/dark-mode.html)， 官方也提供了示例 [element-plus-vite-starter 模版](https://github.com/element-plus/element-plus-vite-starter) 。 > > 这里根据官方文档和示例讲述如何使用 VueUse 的 [useDark](https://vueuse.org/core/useDark