Vue 父组件给子组件传值

pipidi

zhujingdi1998@gmail.com

从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>

阅读量