Vue（二）header元件開發

一、 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 ，接受不到資料就不會解析，也就不會報錯。

二、 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>           

原文釋出時間為：2018年01月20日

原文作者：

前端喵

本文來源：

開源中國

如需轉載請聯系原作者