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>

 

转载于:https://www.cnblogs.com/aidaan/p/9602126.html