咸糖记录编程的地方

Do what you love and the money will follow.

目录
Vue 父组件给子组件传值
/  

Vue 父组件给子组件传值

从ajax中获取数据 然后整理成为array

var array = new Array;
        this.New.imgs.forEach(element => {
            array.push(element)
        });
this.array = array

在父亲组件中导入儿子组件

import Carousel from '../NewsArticle/Carousel'

注册组件

components: {
    
    carousel:Carousel
  
  },

传入值

<carousel v-bind:imgsall="array"></carousel>
imgsallarray绑定

儿子组件

props: {
	imgsall: {
		type: Array,
		required: true
	}
}

确定传入的类型
然后在组件的method内部就可以使用this.imgsall调用了
在html中 直接使用imgall就可以了

父组件:NewsArticle.vue

<template>
    <div class="NewsArticle">
        <div class="title">
            <h2>{{New.title}}</h2>
        </div>
        <carousel v-bind:imgsall="array"></carousel>
        <ul>
            <li v-for="gra in New.content">
                <p>	&nbsp;	&nbsp;	&nbsp;	&nbsp;{{ gra }}</p>
            </li>
        </ul>
        
        <div>
            {{New.pubtime}}
        </div>
    </div>
</template>
<script>
import Carousel from '../NewsArticle/Carousel'
export default {
  name: "NewsArticle",
  data() {
    return {
      New: "",
     
    };
  },
  
components: {
    
    carousel:Carousel
  
  },
  methods: {
    fetchMedal(title) {
      this.$http.get("/News?title=" + title).then(res => {
        this.New = res.data[0];
        var array = new Array;
        this.New.imgs.forEach(element => {
            array.push(element)
        });
        
        this.array = array
        
      });
    }
  },
  created() {
    
    this.fetchMedal(this.$route.query.title);

  }
};
</script>

<style scoped>
.title {
  text-align: center;
}
</style>

子组件:Carousel.vue

<template>
    <div class="carousel">
        <transition-group tag='ul' class="clearfix slide" name='image'>
            <li v-for='(image,index) in imgsall' :key='index' v-show='index===mark'>
                <a><img :src="image"></a>
            </li>

        </transition-group>
        <div class="bullet">
            <span v-for='(item,index) in imgsall.length' :class="{'active':index===mark}" @click='change(index)'></span>
        </div>


        
    <div>
        

    </div>

    </div>
    
</template>
<script>    
export default {
    name: 'carousel',
    props: {
            imgsall: {
                type: Array,
                required: true
            }
            }
            ,
    data(){
        return{
            timer: null,
            mark:0,
           
           
        }    
    },
    created(){
        console.log(this.imgsall)
            // this.img = this.imgsall
            this.play()
            
        },
    methods:{
        
        
        play() {
            
            setInterval(this.autoPlay, 3000)
        },
        change(i){
            this.mark = i
            // this.play()
        },

        autoPlay() {
            this.mark++
                if (this.mark === this.imgsall.length) {
                    this.mark = 0
                    return
                }
        },
        
    }

}
</script>

<style scoped>
* {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        .clearfix {
            content: '';
            clear: both;
            display: block;
        }
        
        .carousel {
            width: 1000px;
            height: 600px;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }
        
        .slide {
            width: 1000px;
            height: 600px;
        }
        
        li {
            position: absolute
        }
        
        img {
            width: 1000px;
            height: 600px;
        }
        
        .bullet {
            width: 100%;
            position: absolute;
            bottom: 10px;
            margin: 0 auto;
            text-align: center;
            z-index: 10;
        }
        
        span {
            width: 20px;
            height: 5px;
            border: 1px solid;
            background: white;
            display: inline-block;
            margin-right: 10px;
        }
        
        .active {
            background: red;
        }
        
        .image-enter-active {
            transform: translateX(0);
            transition: all 1s ease;
        }
        
        .image-leave-active {
            transform: translateX(-100%);
            transition: all 1s ease;
        }
        
        .image-enter {
            transform: translateX(100%)
        }
        
        .image-leave {
            transform: translateX(0)
        }
</style>



标题:Vue 父组件给子组件传值
作者:xiantang
地址:http://xiantang.info/articles/2019/06/03/1559551143781.html

评论