首页 > 其他 > 详细

Vue小项目二手书商城:(三)前端渲染数据

时间:2019-03-13 20:53:03      阅读:243      评论:0      收藏:0      [点我收藏+]

前一节我们用axios取到了数据,这一节我们在前端使用这些数据(父子组件各自应该怎么使用)。

一.简单使用(在哪取在哪用)

1.App.vue中script中加上data(data专属于当前组件,父子组件传参通过prop,prop优先级高于data,这个我们稍后讨论),created中的this.xxx就指向data中的数据(简单来说就是先在data中定义)

技术分享图片

2.我现在是直接在App.vue中写的getScience、getLiterature、getHumanity取得数据,要在App.vue中直接用的话这样写:

技术分享图片

  • 图片、书名、作者、价格都看到了

技术分享图片

3.但是我们有很多内容,不能一直literature[0]、literature[1]......这样写下去吧,我们可以用v-for

技术分享图片

  • literature中所有元素都出来了

技术分享图片

二.子组件使用(要父传过来,或者我自己用axios取)

我们要在子组件使用可以在子组件重新引入数据,但太麻烦了。数据现在传到父组件App.vue中,我们之前在App.vue中用<router-link></router-link><router-view></router-view>实现点击不同路由呈现不同内容(文学、科学、人文三个组件)。也就是说文学、科学、人文现在是App.vue的子组件。子组件想用父组件的数据,用到prop(它只能父传给子写在子组件中

1.父组件中这样写,而且data中要有literature[ ]这一项(data是爸爸的钱包,爸爸有钱才能给儿子)

技术分享图片

2.子组件中这样写,前面提到prop的优先级比data高,所以写了prop就不用写data了,现在可以直接在子组件literature.vue中使用数据literature了

技术分享图片

现在我们实现了主页内容,下一节看看详情页和购物车该怎么做(四)

Vue小项目二手书商城:(三)前端渲染数据

原文:https://www.cnblogs.com/M-M-Monica/p/10526115.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!