header是什么元件(header組件怎么用)

一、 header 組件開發 之數據的傳遞

1. App.vue 引入組件

importheaderfrom'./components/header/header'

2. App.vue 中注冊組件

exportdefault{components:{v-header:header}}

3. 使用組件

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

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

4. 父組件向子組件傳遞數據

在父組件中需要將sellerObj作為數據導出,子組件通過props從父組件中獲得數據,且要指定數據類型

exportdefault{props:{//子組件獲取父組件數據sell:{type:Object//傳遞的類型}}}

小結:

1. 子組件在props中創建一個屬性,用以接收父組件傳過來的值

2. 父組件中注冊子組件

3. 在子組件標簽中添加子組件props中創建的屬性

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

5. 調用數據

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

細節問題:

support 綁定數據時 加 v-if ='sell.supports'

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

二、 header 組件彈出層(詳情)

1.彈出遮罩層

(1) 設置一個狀態,判斷該狀態控制顯示隱藏

data(){return{detailShow:false}}

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

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

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

methods:{showDetails(){this.detailShow=true},hideDetail(){this.detailShow=false}}

2. 星級評分

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

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

computed:{starSizeType(){//返回星級的大小類型48/36/24return'star-'+this.size;}}

(2) 遍歷星星的數量

復制代碼 代碼如下:

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

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

//類名用變量存起來constLENGTH=5//星星長度constCLS_ON='on'//全星constCLS_HALF='half'//半星constCLS_OFF='off'//空星

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

itemClasses(){//返回一個數組為每個span的類名(遍歷)letspanClassList=[];//利用實參評分來判斷有幾顆全星,半星,空星letscores=(Math.floor(this.score*2))/2letintNum=Math.floor(scores);//全星個數letHashalfNum=scores%1!==0//半星for(vari=0;i<intNum;i++){//遍歷全星的spanspanClassList.push(CLS_ON)}if(HashalfNum){//如果有半星加類名spanClassList.push(CLS_HALF)}while(spanClassList.length<LENGTH){//判斷是否有空星及個數spanClassList.push(CLS_OFF)}returnspanClassList;}}

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

<pclass="star":class="starSizeType"><spanv-for="itemClassinitemClasses":class="itemClass"class="star-item"track-by="$index"></span></p>