So verwenden Sie die Header-Komponente

Dieses Mal werde ich Ihnen die Methode zur Verwendung der Header--Komponente und die Vorsichtsmaßnahmen bei der Verwendung der Header-Komponente vorstellen. Schauen wir uns das hier an .

1. Datenübertragung für die Header-Komponentenentwicklung

1. Registrieren Sie sich in App.vue Komponente

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

3. Verwenden Sie die Komponente

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

Erläuterung: :sell="sellerObj", hier ist es wie eine Funktion, die Parameter übergibt und „sell“ als formalen Parameter behandelt, was sellerObj ist der tatsächliche Parameter, wie werden dann die tatsächlichen Parameter der übergeordneten Komponente an die untergeordnete Komponente übergeben und über welche Methode

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

4 Die übergeordnete Komponente übergibt Daten an die untergeordnete Komponente

In der übergeordneten Komponente Komponente, sellerObj müssen als Daten exportiert werden, und die untergeordnete Komponente erhält Daten von der übergeordneten Komponente über Requisiten, und der Datentyp

muss angegeben werden

Zusammenfassung:

export default {
 props:{ // 子组件获取 父组件 数据
 sell:{
  type:Object // 传递的类型 
 }
 }
 }

Die Unterkomponente wird in props erstellt. Ein Attribut, das zum Empfangen des von der übergeordneten Komponente übergebenen Werts verwendet wird.

1. Registrieren Sie die untergeordnete Komponente im übergeordneten Element Komponente

2. Fügen Sie die untergeordnete Komponente im Tag der untergeordneten Komponente hinzu. Das in props

3. erstellte Attribut weist den Wert zu, der an die Unterkomponente übergeben werden muss -Komponente zum Attribut

4. 5. Anrufdaten

Details:

<p class="logo">
 <img :src="sell.avatar" alt="" width=&#39;64&#39; height=&#39;64&#39;/>
</p>
<span class="name">{{sell.name}}</span>
<p class="description">
  {{sell.description + '/' + sell.deliveryTime + '分钟送达'}}
</p>

support Fügen Sie v-if ='sell.supports' hinzu, wenn Bindungsdaten

Grund: Es wurde ein in der übergeordneten Komponente erstellt, bevor wir die Daten über Axios erhalten. Das leere Objekt sellerObj wird zuerst an die Unterkomponente übergeben. Wenn zunächst keine Daten gesendet werden, wird ein unterdefinierter Fehler gemeldet v-if: Wenn die Daten nicht empfangen werden können, werden sie nicht analysiert und es wird kein Fehler gemeldet.

2. Popup-Ebene der Kopfzeile (Details)

1. Popup-Maskenebene

(1 ) Legen Sie einen Status fest, bestimmen Sie den Status zur Steuerung der Anzeige und des Ausblendens

(2) Binden Sie das Klickereignis, ändern Sie den Status über die Methodenmethode und steuern Sie den sichtbaren und ausgeblendeten Effekt

data (){
 return {
 detailShow:false
 }
}

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

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

2. Sternebewertung

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

(1) Bindungsklasse zur Steuerung der Art der Sterngröße

(2) Durchlaufen Sie die Anzahl der Sterne

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

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

Code kopieren

Der Code lautet wie folgt:

(3) Definieren Sie Konstanten, um den Status jedes Sterns zu steuern

(4) Bestimmen Sie den Status jedes Spans durch Berechnung Typ

// 类名用变量存起来
const LENGTH = 5 // 星星长度
const CLS_ON = 'on' // 全星
const CLS_HALF = 'half' // 半星
const CLS_OFF = 'off'// 空星

(5) Fügen Sie einen Klassennamen zum Span hinzu, indem Sie die Klasse dynamisch binden

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;   
 }
}

Ich glaube Sie beherrschen die Methode, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Dinge finden Sie unter php Andere verwandte Artikel auf der chinesischen Website!

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

Empfohlene Lektüre:

WeChat-Applet-Entwicklung der Bildkomprimierungsfunktion

js dynamisches Betriebsformular

So verwenden Sie den Prototyp des Object-Objekts in JS

So gehen Sie mit unvollständiger Seitenanzeige im 360-Browser-Kompatibilitätsmodus um

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Header-Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!