子组件的渲染时间比父组件的渲染时间快导致数据的问题

问题：父组件的在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.dataconsole.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.ShopDataconsole.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>

（Vue爬坑）子组件的渲染时间比父组件的渲染时间快导致数据的问题相关推荐

vue怎么调用子元素的方法_vue.js 父组件如何触发子组件中的方法
文章目录组件组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能 ...
VUE 爬坑之旅 -- 用 ES6 语法写一个工具类，并全局引用
在我前面的有一篇文章里有说过怎么引入外部的 JS 文件,详情见 VUE 爬坑之旅– 如何对公共JS,CSS进行统一管理,全局调用 .这里所说的外部 JS 文件指的是用 ES6 之前的老语法编写的各种 ...
Vue 爬坑之路（六）—— 使用 Vuex + axios 发送请求
Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...
Vue 爬坑之路（一）—— 使用 vue-cli 搭建项目
Vue 爬坑之路(一)-- 使用 vue-cli 搭建项目 vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https: ...
[vue] 在子组件中怎么访问到父组件的实例？
[vue] 在子组件中怎么访问到父组件的实例? 通过this.$parent 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前 ...
vue请求数据传给子组件_vue.js基础，父组件如何向子组件传递数据「607」
本文只有一个学习点. 父组件如何向子组件传递数据. 一起学习,更多文章请关注我的头条号,我是落笔承冰. 一.先创建一张空白网页index.html,在head标签里设置好vue的链接库. 二.写一个绑 ...
【Vue开发实战课后题】子组件为何不可以修改父组件传递的props？
在 Vue 中,子组件为何不可以修改父组件传递的 Prop,如果修改了,Vue 是如何监控到属性的修改并给出警告的. 一.为何不可以修改伏组件传递的Prop? 因为Vue是单向数据流,为了保证数据的单 ...
vue父子组件传值：详解父组件向子组件传值（props）
vue父子组件传值:父组件向子组件传值用的是props 1.定义父组件 1)父组件想要向子组件传值时,那么需要在子组件引入的地方绑定一个属性,属性值就是要传的数据,并且要在父组件中引入子组件. 2)这 ...
VUE子组件如何改变父组件传来的值，以及VUE子组件如何修改父组件的值，以及父组件修改子组件的值
一)子组件修改父组件传来的值: 父组件传递给我一个名为deptName数据,但是现在我要在子组件中修改它的值并且实时更新页面,直接this.deptName是不能直接修改他的值的,所以我采用了使用一个 ...

（Vue爬坑）子组件的渲染时间比父组件的渲染时间快导致数据的问题

子组件的渲染时间比父组件的渲染时间快导致数据的问题

（Vue爬坑）子组件的渲染时间比父组件的渲染时间快导致数据的问题相关推荐

最新文章

热门文章