用Vue实现一个简单的图片轮播 (4)

SliderIndex.vue

1<template>
2    <div style="width:1080px;margin: 0 auto ">
3      <slider></slider>
4    </div>
5</template>
6<script>
7  import slider from "./Slider"
8    export default {
9        name: "SliderIndex",
10        components:{
11          slider:slider
12        },
13    }
14</script>
15
16<style scoped>
17
18</style>

这样，整体的布局效果就已经出来了。这里就不进行截图了。

组件通信和静态资源导入

在Slider.vue这个组件中，我们是将图片直接写死的，上面分析也提到过，哪些数据是可控的，哪些数据是不可控的，图片的话，我们动态引入。

资源导入

资源导入有两种方式，一种是import，另一种是require导入。