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）