1.先在components文件夹中新建一个幻灯片组件slideShow.vue,然后在需要使用到幻灯片的页面中import,注册,便可在模板使用<slide-show>组件。
2。在使用<slide-show>时向幻灯片组件传递两个参数,分别是照片信息以及播放速度
<slide-show :slides="slides" :inv="slideSpeed"></slide-show>
slides和inv是要向幻灯片组件slideShow.vue传递的参数,在父组件的data()中return:
其中照片的路径需要用require方法导入
data(){
return {
slideSpeed: 2000,
slides: [
{
src: require('../assets/slideShow/pic1.jpg'),
title:'我',
href: 'www.baidu.com'
//href是点击图片后跳转的链接
},
{
src: require('../assets/slideShow/pic2.jpg'),
title:'爱',
href: 'www.baidu.com'
},
{
sr