Vue（二）header組件開發

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

1. App.vue 引入組件

import header from './components/header/header'

2. App.vue 中註冊組件

export default {
     components:{
         v-header:header
     }
 }

3. 使用組件

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

解釋：:sell="sellerObj",這裏就像一個函數傳參同樣把sell當成形參，sellerObj就是實參，那麼父組件實參是怎麼傳給子組件的，經過什麼傳

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

在父組件中須要將sellerObj做爲數據導出，子組件經過props從父組件中得到數據，且要指定數據類型

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

小結：

• 子組件在props中建立一個屬性，用以接收父組件傳過來的值

• 父組件中註冊子組件

• 在子組件標籤中添加子組件props中建立的屬性

• 把須要傳給子組件的值賦給該屬性

5. 調用數據

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

細節問題：

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

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

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

1.彈出遮罩層

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

data (){
  return {
 	detailShow:false
  }
}

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

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

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

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

2. 星級評分

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

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

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

(2) 遍歷星星的數量

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

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

// 類名用變量存起來
const LENGTH = 5  //  星星長度
const CLS_ON = 'on'  // 全星
const CLS_HALF = 'half' // 半星
const CLS_OFF = 'off'// 空星

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

itemClasses () {  //  返回一個數組爲每一個span 的類名  （遍歷）
   let spanClassList=[];
   // 利用 實參評分來判斷 有幾顆全星，半星，空星
  let scores=( Math.floor(this.score * 2) ) / 2 
  let intNum= Math.floor(scores); // 全星個數  
  let HashalfNum= scores % 1 !== 0   // 半星
  for(var i=0;i<intNum;i++){ // 遍歷全星的span
	spanClassList.push(CLS_ON)
  }
  if(HashalfNum){ //  若是有半星  加類名
	spanClassList.push(CLS_HALF)
  }
  while(spanClassList.length<LENGTH){//  判斷 是否有空星 及個數
	spanClassList.push(CLS_OFF)
  }
   return spanClassList;	    	
  }
}

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

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

後續更新...