如何实现vue3.0中封装自定义轮播图组件的详细步骤？

本文共计1752个文字，预计阅读时间需要8分钟。

接上文，以下是对原文的简化

学习完上一篇文章后，掌握Vue 3.0的基本用法。经过一段时间的实践，开始准备开发适用于Vue 3.0的PC端组件库。将陆续跟进一些组件库的编写方法和注意事项，感兴趣的同学们可多加关注。

接着上一篇文章，熟悉vue3.0的基本用法，和使用一段时间以后，开始准备开发适用于vue3.0使用的pc端的组件库。会陆续跟新一些组件库的写法和注意事项，有兴趣的同学可以多多关注哦，不多bb，开始。

开发一个轮播图组件，适用pc端，(暂无考虑app), 使用于vue3.0 + TS

大致的实现效果是这样：

图片自由轮播，对应圆点图片跳转，左右指示器跳转等。暴露以下options配置：

以上是主要的options，下面展开来说一下具体如何封装。

一：封装思想

在vue3.0和vue2.0中封装组件其实核心思想都是一样的，需要使用到vue.component();对组件进行注册，之后在main.ts中挂载一下就可以使用。

在 src下面创建： src --> libs --> sqm_ui(自己UI库的名称）-->index.js

这里的index.js就是注册组件的入口。

同级目录下新建一个文件， Carousel， 这个文件包含所有的轮播组件的功能和样式。

目录如下：

要注意一点： 虽然是在vue3.0和ts中使用，但是入口文件还是用js，这也是为了可以适用非ts写法。