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）