前一節我們用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中

2.子組件中這樣寫，前面提到prop的優先級比data高，所以寫了prop就不用寫data了，現在可以直接在子組件literature.vue中使用數據literature了

現在我們實現了主頁內容，下一節看看詳情頁和購物車該怎麽做（四）

Vue小項目二手書商城：（三）前端渲染數據