vuejs 幻灯片组件发开

实现一个幻灯片组件

        回顾一下在vue里面组件之间的交互，父组件向子组件传递信息，通过的是子组件的属性props；子组件想要通知父组件一些事件，是通过自定义事件来实现的。那么想一下，幻灯件作为子组件，需要怎样的属性和事件呢？在事件上，可以设置一个onchange事件，每一次幻灯片切换了，都会通知父组件，这个事件可以带一个参数，可能是当前在哪个页面；父组件需要告诉子组件我们要展示的图片数组以及一些相应信息的数组

1.新建一个slideShow.vue

<template>
    <div>
        hello world{{x}}
    </div>
</template>
<script>
export default {
    data () {
        return {
            x:1
        }
    }
}
</script>
<style scoped></style>

2.在index.vue根组件中引用

<script>
/*引入幻灯片组件*/
import slideShow from '../components/slideShow'
export default {
   components: {
      slideShow
   },
   data () {
    return {
        slides: [
            {
              src: require('../assets/slideShow/pic1.jpg'),//在Js里面，用require将图片引入进来
              title: 'xxx1',
              href: 'detail/analysis'
            },
            {
              src: require('../assets/slideShow/pic2.jpg'),
              title: 'xxx2',
              href: 'detail/count'
            },
            {
              src: require('../assets/slideShow/pic3.jpg'),
              title: 'xxx3',
              href: 'http://xxx.xxx.com'
            },
            {
              src: require('../assets/slideShow/pic4.jpg'),
              title: 'xxx4',
              href: 'detail/forecast'
            }
         ],
	 ...
    }
  },
	...
}
</script>

<template>
   <slide-show :slides="slides"></slide-show> //接受一个slides属性，这里传什么内容，幻灯片就展示什么内容
</template>

补充：什么情况下我们需要使用require,就是图片通过js引入到项目里包括模板里（就是放到<script>部位）

3.子组件接收父组件的传值

<script>
export default {
    props: {
        slides: {  /*设置默认值*/
            type: Array,
            default: []
        }
    },
    data () {
        return {
            x:1
        }
    },
    mounted() {
        console.log(this.slides)
    }
}
</script>

props的意思是当前这个组件接收一些什么属性，这里接收的是slides这个属性

可以在控制台打印出接收到的数据

接下来就是根据这样的一个数据，展现到幻灯片位置

4.附上后续相关代码

//slideShow.vue

<template>
    <div class="slide-show" @mouseover="clearInv" @mouseout="runInv">
        <div class="slide-img">
            <a :href="slides[nowIndex].href">
                <img :src="slides[nowIndex].src">
            </a>
        </div>
        <h2>{{slides[nowIndex].title}}</h2>
        <ul class="slide-pages">
            <li @click="goto(prevIndex)">&lt;</li>
            <li v-for="(item, index) in slides" @click="goto(index)">
                <a :class="{on : index === nowIndex}">{{index+1}}</a>
            </li>
            <li @click="goto(nextIndex)">&gt;</li>
        </ul>
    </div>
</template>

<script>
export default {
    props: {
        slides: {  /*设置默认值*/
            type: Array,
            default: []
        },
      inv: {
        type: Number,
        default: 1000
      }
    },
    data () {
        return {
            nowIndex: 0
        }
    },
    computed : {
      prevIndex (){
        if(this.nowIndex === 0 ){
          return this.slides.length - 1;
        }else {
          return this.nowIndex - 1;
        }
      },
      nextIndex(){
        if(this.nowIndex === this.slides.length - 1 ){
          return 0;
        }else {
          return this.nowIndex + 1;
        }
      }
    },
    methods: {
      goto (index) {
        this.nowIndex = index;
      },
      runInv () {
        this.invId = setInterval( () => {
            this.goto(this.nextIndex)
          },this.inv)
      },
      clearInv (){
          clearInterval(this.invId)
      }
    },
    mounted() {
        console.log(this.slides)
        this.runInv();
    }
}
</script>

//index.vue

<slide-show :slides="slides" :inv="slideSpeed"></slide-show>

效果如下：

5.可以加入一些动画效果...

6.设置一个onchange事件，每一次幻灯片切换了，都会通知父组件

methods: {
  goto (index) {
    this.isShow = false;
    setTimeout( () => {
        this.isShow = false;
        this.nowIndex = index;
        this.$emit('onchange', index);
    },10)

  },

<slide-show :slides="slides" :inv="slideSpeed" @οnchange="doSomethingsOnSlideChange"></slide-show>

methods: {
  doSomethingsOnSlideChange () {
    console.log("doSomethingsOnSlideChange run");
  }
},