正文
vue 关于props 父组件传值
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
swiper.vue 子组件
info.vue 父组件
swiper.vue
<template>
<div class="swiper-wrap" @mouseover="autoPlayStop" @mouseout="autoPlayStart(0)">
<p>
<img :src="sildeArr[nowIndex]" >
</p>
<p class="sli-page">
<span @click="goto(prev)"><</span>
<span v-for="(item,index) in sildeArr" :style="{'color': nowIndex == index ? active : unActive}" @click="goto(index)">{{index+1}}</span>
<span @click="goto(next)">></span>
</p>
</div>
</template>
<script> export default({
name:'swiper',
props:{
unActive:{//索引默认颜色
type:String,
default: '#f5f5f5',
},
active:{//索引选中颜色
default: '#ccc',
},
autoPlaytime:{
type:Number,
default:3000
} },
data(){
return {
nowIndex:0,
autoPlaytype:true
}
},
computed:{
prev(){
if(this.nowIndex==0){
return this.sildeArr.length-1
}else{
return this.nowIndex-1
}
// nowIndex--;
},
next(){
if(this.nowIndex==this.sildeArr.length-1){
return 0
}else{
return this.nowIndex+1
}
}
},
methods:{
goto(index){
this.nowIndex=index
},
autoPlayStop(){
let _this=this;
clearInterval(_this.autoPlaytype)
},
autoPlayStart(i){
let _this=this;
_this.autoPlaytype=setInterval(()=>{
_this.goto(_this.next)
},_this.autoPlaytime) }
},
mounted(){
this.autoPlayStart();
}
})
</script> info.vue
<template>
<div>
<swiper :sildeArr="img" :autoPlaytime="time" unActive="#888" active="#fff" ></swiper>
</div>
</template>
<script type="text/javascript">
import swiper from './swiper'
import dataImg from '../data/aboutme';
export default({
name:'header',
data(){
return{
img:[],
time:2000
}
},
created (){
this.$router.push('/heade/info');
this.$router.push('info');
this.$http.get('http://img.cn').then((data)=>{
let dataImg=JSON.parse(data.bodyText);
this.img=dataImg.img
});
},
components: {swiper}
})
</script>
