Beispielcode für die Entwicklung von Vue-Header-Komponenten

Dieser Artikel stellt Ihnen hauptsächlich die Entwicklung von Vue-Header-Komponenten ausführlich vor und gibt Ihnen eine Referenz. Ich hoffe, dass Sie ein tieferes Verständnis für die Entwicklung von Vue-Komponenten haben.

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

1. App.vue führt Komponenten ein

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

2. Registrieren Sie die Komponente in App.vue

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

3. Verwenden Sie die Komponente

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

Erläuterung: :sell="sellerObj", hier wird „sell“ als formaler Parameter behandelt, genau wie ein Funktionsparameter, und „sellerObj“ ist der tatsächliche Parameter. Wie werden also die tatsächlichen Parameter der übergeordneten Komponente übergeben? untergeordnete Komponente und durch was

4. Übergeordnete Komponente übergibt Daten an untergeordnete Komponente

In der übergeordneten Komponente muss sellerObj als Daten exportiert werden, und die untergeordnete Komponente erhält Daten von der übergeordneten Komponente über props, und der Datentyp muss angegeben werden

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

Zusammenfassung:

1. Die untergeordnete Komponente erstellt eine Eigenschaft in props to Erhalten Sie den von der übergeordneten Komponente übergebenen Wert

2. Registrieren Sie die Unterkomponente in der übergeordneten Komponente

3. Fügen Sie die in den Unterkomponenten-Requisiten erstellten Eigenschaften in der Unterkomponente hinzu Tag

4. Weisen Sie dem Attribut

den Wert zu, der an die Unterkomponente übergeben werden muss. Daten aufrufen

<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 + &#39;/&#39; + sell.deliveryTime + &#39;分钟送达&#39;}}
</p>

Details:

Unterstützung Fügen Sie beim Binden von Daten v-if ='sell.supports' hinzu

Grund: Bevor wir die Daten über Axios erhalten, müssen wir Erstellen Sie ein leeres Objekt sellerObj in der übergeordneten Komponente und übergeben Sie es zunächst an die untergeordnete Komponente. Wenn die Daten nicht empfangen werden können, wird zunächst ein unterdefinierter Fehler gemeldet werden 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, um das Anzeigen und Ausblenden zu steuern

data (){
 return {
 detailShow:false
 }
}

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

(2) Klickereignis binden, Ändern Sie den Methodenstatus, steuern Sie die sichtbaren und unsichtbaren Effekte

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

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

2 🎜>

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

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

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

(2) Durchquere die Sterne Die Menge

Code kopieren Der Code lautet wie folgt:

4b097d3b947da478dd6d1685bcd8ca9554bdf357c58b8a65c66d7c19c8e4d114

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

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

(4) Bestimmen Sie den Typ jeder Spanne durch Berechnung

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) Fügen Sie a hinzu Klassenname an die Spanne durch dynamisches Binden der Klasse

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

Verwandte Empfehlungen:

Detailliertes Beispiel für jQuery-Einstellungsanforderungsinformationen in der Header

Detaillierte Erläuterung, wie PHP benutzerdefinierte Daten über den Header sendet

Zusammenfassung der Verwendung des PHP-Headers

Das obige ist der detaillierte Inhalt vonBeispielcode für die Entwicklung von Vue-Header-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!