Vueheader組件開發(fā)實例代碼

一、 header 組件開發(fā) 之數(shù)據(jù)的傳遞

1. App.vue 引入組件

2. App.vue 中注冊組件

3. 使用組件

<v-header :sell="sellerObj"></v-header>

解釋：:sell="sellerObj",這里就像一個函數(shù)傳參一樣把sell當成形參，sellerObj就是實參，那么父組件實參是怎么傳給子組件的，通過什么傳

4. 父組件向子組件傳遞數(shù)據(jù)

在父組件中需要將sellerObj作為數(shù)據(jù)導(dǎo)出，子組件通過props從父組件中獲得數(shù)據(jù)，且要指定數(shù)據(jù)類型

小結(jié)：

1. 子組件在props中創(chuàng)建一個屬性，用以接收父組件傳過來的值

2. 父組件中注冊子組件

3. 在子組件標簽中添加子組件props中創(chuàng)建的屬性

4. 把需要傳給子組件的值賦給該屬性

5. 調(diào)用數(shù)據(jù)

<p class="logo">
 <img :src="sell.avatar" alt="" width='64' height='64'/>
</p>
<span class="name">{{sell.name}}</span>
<p class="description">
 {{sell.description + '/' + sell.deliveryTime + '分鐘送達'}}
</p>

細節(jié)問題：

support 綁定數(shù)據(jù)時 加 v-if ='sell.supports'

理由 ： 在我們通過axios獲取數(shù)據(jù)前在父組件中創(chuàng)建了一個空的對象sellerObj 先傳給子組件，開始 沒有數(shù)據(jù)傳送過去就會報錯 underfined，加上 v-if ，接受不到數(shù)據(jù)就不會解析，也就不會報錯。

二、 header 組件彈出層（詳情）

1.彈出遮罩層

(1) 設(shè)置一個狀態(tài)，判斷該狀態(tài)控制顯示隱藏

<p v-if="detailShow" class="detail"></p>

(2) 綁定點擊事件,通過methods 方法改變 狀態(tài)，控制顯隱效果

<p class="bulletin-wrapper" @click="showDetails()" ></p>
<p class="detail-close" v-if="sell.supports">
 <i class="icon-close" @click="hideDetail()"></i>
</p>

2. 星級評分

(1) 綁定class 控制星級大小的類型

// 利用 computed 屬性
<p class="star" :class="starSizeType"></p>

(2) 遍歷星星的數(shù)量

代碼如下:

<span v-for="itemClass in itemClasses" :class="itemClass" class="star-item" track-by="$index"></span>

(3) 定義常量 控制 每個星的狀態(tài)

(4) 通過計算 判斷每個span 的類型

(5) 通過 動態(tài)綁定class 來 給span 加類名

<p class="star" :class="starSizeType">
 <span v-for="itemClass in itemClasses" :class="itemClass" class="star-item" track-by="$index"></span>
</p>

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com