(Vue爬坑)子组件的渲染时间比父组件的渲染时间快导致数据的问题
子组件的渲染时间比父组件的渲染时间快导致数据的问题问题:父组件的在mounted钩子函数中拿接口的数据 ,然后渲染给子组件;因为子组件渲染的速度比父组件快,所以子组件的pros内的数据是空的解决问题如下:父组件页面》把请求接口的函数放在Vue.$nextTick()内子组件页面》监听父组件传过来的数据如果数据发生变化就渲染父组件页面:<template><di...
·
子组件的渲染时间比父组件的渲染时间快导致数据的问题
问题:父组件的在mounted钩子函数中拿接口的数据 ,然后渲染给子组件;因为子组件渲染的速度比父组件快,所以子组件的pros内的数据是空的
解决问题如下:
子组件页面》监听父组件传过来的数据
如果数据发生变化就渲染
父组件页面:
<template>
<div class="index">
<search-box></search-box>
<image-swiper v-bind:lunboData="lunboList"></image-swiper>
<icon-swiper></icon-swiper>
<keep-alive>
<card-list v-bind:ShopData="ShopList"></card-list>
</keep-alive>
<tar-bar></tar-bar>
</div>
</template>
<script>
import SearchBox from "@/components/SearchBox";
import ImageSwiper from "@/components/ImageSwiper";
import IconSwiper from "@/components/IconSwiper";
import CardList from "@/components/CardList";
import TarBar from "@/components/TarBar";
export default {
name: "index",
components: { SearchBox, TarBar, ImageSwiper, IconSwiper, CardList},
data() {
return {
msg: "商品index首页",
lunboList:[],
ShopList:[]
};
},
created() {
},
mounted() {
this.$nextTick(()=>{
console.log(11)
// 拿到轮播图数据
this.$Axios.get('http://localhost:4500/Rotation').then((res, rej) => {
this.lunboList = res.data
}).catch(err => {
console.log(err)
})
// 拿到商品推荐数据
this.$Axios.get('http://localhost:4500/ShopInformation').then((res, rej) => {
this.ShopList = res.data
console.log("这是主页面拿到的数据", this.ShopList)
}).catch(err => {
console.log(err)
})
})
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.index{
height: 100%;
overflow: hidden;
}
</style>
子组件页面
<template>
<div class="CardList">
<div class="box" v-for="(item,index) in ShopList" v-on:click="ShopDetail(index)">
<div class="left">
<img :src=item.ShopPictures />
</div>
<div class="right">
<div class="shopTitle"><span style="background-color: #FFFFFF;height: 20px;width:40px;"></span>{{item.ShopTItle}}</div>
<div class="shopName">{{item.StoreName}}</div>
<div class="shopRecord">
<span v-for="(child_item,index) in item.ShopLabel" class="shopRecord_tip">{{child_item.text}}</span>
</div>
<div class="shopTip">
<div class="shopTip_price">¥{{item.ShopPrice}}</div>
<div class="shopTip_volume">已拼{{item.ShopSales}}件</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "CardList",
props:["ShopData"],
data() {
return {
msg:"主页商品列表栏"
},
methods:{
ShopDetail:function(i){
console.log(i)
this.$router.push({
name:'ShopDetail',
params:{id:i}
})
}
},
watch:{
ShopData(){
console.log(this.ShopData,)
this.ShopList = this.ShopData
console.log("这是子页面拿到的数据",this.ShopList.ShopLabel)
this.ShopList.forEach((item)=>{
let arr =item.ShopLabel.split(",")
console.log(item,arr)
item.ShopLabel=[]
arr.forEach((items)=>{
item.ShopList.push({
"text":items
})
})
})
}
},
mounted() {
}
}
</script>
<style lang="less">
.CardList {
margin-top: 10px;
background-color: #FFFFFF;
width: 100%;
.box {
padding: 10px;
display: flex;
.left>img {
height: 200px;
width: 200px;
}
.right {
padding: 10px;
width: 100%;
.shopTitle {
font-size: 20px;
text-indent: 2rem;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 2;
}
.shopName {
color: gray;
}
.shopRecord {
margin-top: 30px;
.shopRecord_tip{
margin-right: 10px;
}
}
.shopTip {
display: flex;
align-items: center;
.shopTip_price {
color: red;
font-size: 25px;
}
.shopTip_volume {
margin-left: 20px;
color: gray;
}
}
}
}
}
</style>
更多推荐
已为社区贡献6条内容
所有评论(0)