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钩子问题的更多相关文章
- 从父子组件的mounted钩子的同步执行与页面的异步渲染看nextTick的用法
最近复习vue的时候遇到了一个很奇怪的问题,我们直接从实例中看: <div id="app"> <child ref="child">& ...
- vue 使用同一组件,切换时不触发created、mounted钩子
两个页面参数不同使用同一组件,默认情况下当这两个页面切换时并不会触发created或者mounted钩子. 方法一:通过watch $route的变化来做处理 watch: { $route() { ...
- vue中子组件的created、mounted钩子中获取不到props中的值问题
父子组件通信 这个官网很清楚,也很简单,父组件中使用v-bind绑定传送,子组件使用props接收即可 例如: 父组件中: <template> <div> <head- ...
- Vue.js 系列教程 3:Vue-cli,生命周期钩子
原文:intro-to-vue-3-vue-cli-lifecycle-hooks 译者:nzbin 这是 JavaScript 框架 Vue.js 五篇教程的第三部分.在这一部分,我们将学习 Vue ...
- Vue 实例中的生命周期钩子
Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...
- Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]
前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...
- vue 项目实战 (生命周期钩子)
开篇先来一张图 下图是官方展示的生命周期图 Vue实例的生命周期钩子函数(8个) 1. beforeCreate 刚 new了一个组件,无法访问到数据和真实的do ...
- vue学习之生命周期和钩子函数
参考文章:Vue2.0 探索之路——生命周期和钩子函数的一些理解 抛出问题: 我们有时候会在几个钩子函数里做一些事情,那么什么时候做,该在哪个函数里做? 生命周期简介 结合代码看el 和 data以及 ...
- vue 生命周期钩子的理解 watch computed
一 理解vue的生命周期,首先需要注意几个关键字 1. el :选择器 2. $el:对应选择器的template模板(html代码) 3. render:也是vue实例中的一项,其参数更接近vue ...
随机推荐
- Ubuntu 16.04错误:The update information is outdated this may be caused by network...的问题解决
说明:这个问题没有最终的解决方案,只有不断的尝试. 错误: The update information is outdated this may be caused by network probl ...
- Linux运行级别研究(转)
Linux系统中的运行级别 7种运行级别 运行级别(Runlevel)指的是Unix或者Linux等类Unix操作系统的运行模式,不同的运行模式下系统的功能也有所有不同.Linux 系统下通常分为7种 ...
- Oracle Multitenant Environment (三) Plan for a cdb
Below tables contains contant you need to consider while planning for a CDB. Action Considerations f ...
- Json解析工具Jackson(使用注解)--jackson框架自定义的一些json解析注解
Json解析工具Jackson(使用注解)--jackson框架自定义的一些json解析注解 @JsonIgnoreProperties 此注解是类注解,作用是json序列化时将Javabean中的一 ...
- 问答:怎样规划CSS 中 的命名方式 怎样看待 CSS 中 BEM 的命名方式?
好多盆友 非常纠结 css命名规则 怎么弄,还没起步就被绊住了.那么今天蝈蝈就针对这个问题来讨论一下 没什么技术 含量.但却对效率开发至关重要的 "问题". 下文是一些知乎大神的个 ...
- [Vue] Props Validations
Components can specify requirements for its props, such as the types you’ve already seen. If a requi ...
- Leet Code OJ 26. Remove Duplicates from Sorted Array [Difficulty: Easy]
题目: Given a sorted array, remove the duplicates in place such that each element appear only once and ...
- js20170320
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Android App调用MediaRecorder实现录音功能的实例【转】
本文转载自:http://www.jb51.net/article/82281.htm 这篇文章主要介绍了Android App调用MediaRecorder实现录音功能的实例,MediaRecord ...
- [BZOJ 2199] 奶牛议会
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2199 [算法] 2-SAT [代码] #include<bits/stdc++ ...