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

时间:2023-03-09 08:09:12
Vue小项目二手书商城:(三)前端渲染数据

实现内容:

  • axios取到的数据在前端使用(父子组件各自应该怎么使用)

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

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

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

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

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

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

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

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

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

  • literature中所有元素都出来了

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

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

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

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

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

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

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