Vue小项目二手书商城：（三）前端渲染数据

实现内容：

• 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小项目二手书商城：（四）详情页和购物车（emit、prop、computed）