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钩子问题的更多相关文章

  1. 从父子组件的mounted钩子的同步执行与页面的异步渲染看nextTick的用法

    最近复习vue的时候遇到了一个很奇怪的问题,我们直接从实例中看: <div id="app"> <child ref="child">& ...

  2. vue 使用同一组件,切换时不触发created、mounted钩子

    两个页面参数不同使用同一组件,默认情况下当这两个页面切换时并不会触发created或者mounted钩子. 方法一:通过watch $route的变化来做处理 watch: { $route() { ...

  3. vue中子组件的created、mounted钩子中获取不到props中的值问题

    父子组件通信 这个官网很清楚,也很简单,父组件中使用v-bind绑定传送,子组件使用props接收即可 例如: 父组件中: <template> <div> <head- ...

  4. Vue.js 系列教程 3:Vue-cli,生命周期钩子

    原文:intro-to-vue-3-vue-cli-lifecycle-hooks 译者:nzbin 这是 JavaScript 框架 Vue.js 五篇教程的第三部分.在这一部分,我们将学习 Vue ...

  5. Vue 实例中的生命周期钩子

    Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...

  6. Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]

    前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...

  7. vue 项目实战 (生命周期钩子)

    开篇先来一张图 下图是官方展示的生命周期图 Vue实例的生命周期钩子函数(8个)        1. beforeCreate             刚 new了一个组件,无法访问到数据和真实的do ...

  8. vue学习之生命周期和钩子函数

    参考文章:Vue2.0 探索之路——生命周期和钩子函数的一些理解 抛出问题: 我们有时候会在几个钩子函数里做一些事情,那么什么时候做,该在哪个函数里做? 生命周期简介 结合代码看el 和 data以及 ...

  9. vue 生命周期钩子的理解 watch computed

    一  理解vue的生命周期,首先需要注意几个关键字 1. el :选择器 2. $el:对应选择器的template模板(html代码) 3. render:也是vue实例中的一项,其参数更接近vue ...

随机推荐

  1. Eclipse安装Properties插件来编辑中文

    一.在线安装 输入这个地址:http://propedit.osdn.jp/eclipse/updates/ 二.离线安装 在官网上下载最新版本:https://zh.osdn.net/project ...

  2. docker run和nsenter

    docker run和nsenter 1,本机运行java -version没有内容, 使用 docker run java java -version就有内容了: 2, docker run -d ...

  3. Spring注解配置定时任务<task:annotation-driven/>

    http://m.blog.csdn.net/article/details?id=50945311 首先在配置文件头部的必须要有: xmlns:task="http://www.sprin ...

  4. ubuntu各文件夹简介 [转载]

    原文地址:ubuntu各文件夹简介作者:SuperZhy ubuntu各文件夹简介 /bin 二进制可执行命令/dev 设备文件(硬盘/光驱等)/etc 系统管理和配置文件/etc/rc.d 启动的配 ...

  5. Cocos2d坐标系具体解释

    1.笛卡尔坐标系 左手坐标系(Direct3D坐标系),右手坐标系(Direct3D坐标系) 大拇指和食指分别相应x轴和y轴 2.UI坐标系 iOS/Android/Windows SDK中的通用UI ...

  6. 汉澳Sinox2014X64server高级桌面服务器版操作系统公布

    汉澳Sinox2014X64server高级桌面服务器版操作系统公布   当你在现代城市夜空中看到一道闪电.屏幕中央闪过几个图形,转眼间变成美轮美奂的紫色空中天国,说明你来到了汉澳sinox2014世 ...

  7. Database returned no natively generated

    database returned no natively generated 分类:Hibernatehbm.xml中的配置如下: <id name="logId" typ ...

  8. BestCoder Round #60/HDU 5505 暴力数学

    GT and numbers 问题描述 给出两个数NN和MM. NN每次可以乘上一个自己的因数变成新的NN. 求最初的NN到MM至少需要几步. 如果永远也到不了输出-1−1. 输入描述 第一行读入一个 ...

  9. 读取Excel文件到DataTable中

    private static string[] GetExcelSheetNames(OleDbConnection conn)        {            DataTable dtbSh ...

  10. win7下远程登录ubuntu mysql

    网络上找了很久的一个办法,不然老是远程访问不了linux mysql. 原先一直用root登录,进不了,新建一个root1倒是可以了. 安装好mysql后,按以下步骤: 1.将vim /etc/mys ...