手动封装分页组件(Vue3)
这时候，Vue.extend + vm.$mount 组合就派上用场了。
elementUI中的组件本身是已经经过封装的便于开发，但是由于项目使用次数过多，为了更简便的统一使用将其进行封装复用。
动态修改的。vue2能用vue3是用于vue的自定义组件封装动态修改的，因此是封装的组件。组件是数据和方法的封装，就是指一组数据可以提供一些操作实现一些简单的功能，比如用户查询组件。
vue手动封装map数据，在中间包一层即可。vue是渐进式javascript框架。Vue(读音/vju？/，类似于view)是一套用于构建用户界面的渐进式框架。
VUE如何封装一个组件
每个列表项有自己的业务逻辑，点击事件等等 后端接口请求参数，pageIndex和pageSize之外的参数。封装可复用列表组件涉及到的vue 技术点 props 父组件 把 请求api地址和请求参数传递给组件。
那么在封装组件的时候就不用去写按钮，只用在合适的未知留一个slot，把按钮的位置留出来，然后再父组件中写入：这样一个具名插槽灵活地解决了不同场景同一组件不同配置的问题。
v-bind=$attrs 的妙用是在创建更高级别的组件，在封装第三方组件时，可以自动将在父作用域中使用的 v-bind 的属性自动绑定，并向下传入被封装的使用了 v-bind=$attrs 的组件。
vue封装树形组件
1、最近在做一个vue的项目，独立封装树形组件。先说一下项目需求：项目原型：此树形结构分为三级：根节点，一级节点，二级节点，每个节点都可以选中或取消选中，父级节点选中，下级的所有节点也可全部选中。
2、引入组件，在使用Vue.use的时候就是去执行 Vue.component ，component包含两个参数(name，Object)，封装组件的时候可以直接使用组件定义的名称，引入的组件就直接作为第二次参数实例。
3、这时候，Vue.extend + vm.$mount 组合就派上用场了。
4、首先进行异步加载。其次进入手风琴模式。然后保存已加载的选中的节点keys，未加载的子节点不保存，页面初始化时设置选中的keys。最后匹配时根据节点的绝对路径进行匹配即可。
Vue组件(30)封装一下数据列表的控件
1、好像前端喜欢叫 table，而后端喜欢叫grid。就是现实数据的列表。当然table还有其他的含义，UI库的table也是有其他的功能的。
2、封装可复用列表组件涉及到的vue 技术点 props 父组件 把 请求api地址和请求参数传递给组件。v-slot 作用域插槽 父组件可以访问子组件 item 数据，解耦UI布局。mint-ui Loadmore 组件 实现上拉加载更多。
3、最近在做一个vue的项目，独立封装树形组件。先说一下项目需求：项目原型：此树形结构分为三级：根节点，一级节点，二级节点，每个节点都可以选中或取消选中，父级节点选中，下级的所有节点也可全部选中。
4、这时候，Vue.extend + vm.$mount 组合就派上用场了。
vue封装组件swiper轮播组件
这里我说一下vue-awesome-swiper这个轮播组件，真的非常强大，基本可以满足我们的轮播需求。swiper相信很多人都用过，很好用，也很方便我们二次开发，定制我们需要的轮播效果。
安装依赖 npm i swiper@5 --save npm i vue-awesome-swiper@3 --save 版本不过高 在main文件里全局引入轮播图和css同时使用Vue.use来注册一个轮播图插件 3。
其实很简单，只需要为每个轮播图设置不同的class类和不同的options名即可。
在Vue中将echart封装为可复用组件
1、let obj={...}； // 把设置图表数据的对象单独拿出来定义 定义2个数组arr1，arr2，循环你的json，给两个数组添加数据。
2、从上边可以看出，你每次在使用echarts的时候，都必须要重复的引入，这样很不方便 vue作为一个组件化开发的框架，我们可以使用组件的方式进行集成。每次我们引入组件，进行使用，这样就方便的多。
3、Chrome调试模拟手机端操作效果： 我将拆分为两个部分，标题和三个选择框写在当前页面seller.vue中，将配置折线图的样式都写在父组件seller.vue里，折线图则抽象化为可复用的组件。
4、npm install echarts-gl 安装好了之后，你就可以在你的node_modules文件夹内找到echarts和echart-gl文件夹了。