轮播图组件—Vue项目中共用全局组件的使用

潇xiao雨未歇

已于 2022-07-08 23:55:15 修改

阅读量2.2k

点赞数

分类专栏： vue学习过程笔记文章标签： vue.js javascript 前端

于 2022-06-17 11:47:03 首次发布

本文链接：https://blog.csdn.net/qq_53985958/article/details/125330419

版权

本文介绍了在Vue项目中如何创建和使用全局轮播图组件，详细步骤包括：引入swiper依赖，注册全局组件，封装轮播图结构，监听并接收父组件传递的数据。通过这种方式，可以在项目中实现轮播图组件的复用，提高代码的效率和维护性。

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

轮播图（共用全局组件的使用）：

封装前提条件：结构和样式行为需要几乎一样（包括使用的方法）

第一步：

引入相应依赖包（swiper.js | swiper.css）

在Carousel组件(放置轮播图的组件)中：
```
//引入swiper
import Swiper from "swiper";
```
注意： 其他地方使用轮播图组件时无需再引入！

全局组件样式引入—main.js文件：
```
//引入swiper样式
import "swiper/css/swiper.min.css";
```

第二步：

注册全局组件（main.js—入口文件）

全局组件的好处：一次注册，多次使用

//轮播图组件---全局组件(全部放在components文件夹下)
import Carousel from '../src/components/Carousel'
//使用组件 第一个参数：全局组件的名字 第二个参数：哪一个组件
Vue.component(Carousel.name, Carousel)

第三步：

轮播图结构封装

新建全局组件文件夹Carousel、新建文件index.vue — 单独封装结构 => template ：
```
<div class="swiper-container" ref="cur">
    <div class="swiper-wrapper">
      <div class="swiper-slide
```