mounted钩子问题

recommend.vue

<script type="text/ecmascript-6">

	import Slider from 'base/slider/slider'

	import {getRecommend, getDiscList} from 'api/recommend'

	import {ERR_OK} from 'api/config'

  export default {

		name: 'Recommend',

    data() {

      return {

      	recommends:[]

      }

    },

    components: {

    	Slider

    },

    created() {

    	this._getRecommend()

    },

    methods: {

    	_getRecommend(){

    		getRecommend().then((res)=> {

    			if(res.code === ERR_OK){

    				console.log(res.data.slider);

    				this.recommends = res.data.slider

    			}

    		})

    	}

    }

  }

</script>

　　在recommend.vue中created执行this._getRecommend()，这是个异步操作，可能需要几秒, 但是slide.vue中的mounted钩子已经渲染执行，

但slide.vue中插槽无内容，出错

<template>

  <div class="slider" ref="slider">

    <div class="slider-group" ref="sliderGroup">

      <slot>

      </slot>

    </div>

    <div class="dots">

      <span class="dot"></span>

    </div>

  </div>

</template>

<script type="text/ecmascript-6">

    import {addClass} from 'common/js/dom'

    import Bsrcoll  from 'better-scroll'

  export default {

    name: 'Slider',

    props: {

        loop: {

            type: Boolean,

            default: true

        },

        autoplay: {

            type: Boolean,

            default: true

        },

        interval: {

            type: Number,

            default: 4000

        }

    },

    mounted() {

        setTimeout( () => {

            this._setSliderWidth()

            this._initSlider()

        },20)//浏览器涮新时间

    },

    methods: {

        _setSliderWidth(){

            //获取sliderGroup子元素dom集合

            this.children = this.$refs.sliderGroup.children 

            let width = 0

            let slideWidth = this.$refs.slider.clientWidth//slider窗口宽度

            for (let i =0; i < this.children.length; i++) {

                let child = this.children[i]

                addClass(child, 'slider-item')

                child.style.width = slideWidth + 'px'

                width += slideWidth

            }

            if(this.loop){

                width += 2*slideWidth

            }

            this.$refs.sliderGroup.style.width = width + 'px'

        },

        _initSlider(){

        }

    }

  }

</script>

所以在父级添加v-if="recommends.length"，来判断recommends是否得到

<div class="slider-wrapper" v-if="recommends.length">

                    <slider>

                            <div v-for="item in recommends" :key="item.id ">

                                <a :href="item.linkUrl">

                                    <img :src="item.picUrl" alt="" />

                                </a>

                            </div>

                    </slider>

            </div>

巴特西

mounted钩子问题

最新文章

热门文章