Comment utiliser le composant d'en-tête

Cette fois, je vais vous apporter la méthode d'utilisation du composant header , et quelles sont les précautions lors de l'utilisation du composant header Voici un cas pratique, jetons un coup d'œil. .

1. Transmission de données pour le développement du composant d'en-tête

1. App.vue introduit le composant

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

2. Composant

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

3. Utiliser le composant

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

Explication : :sell="sellerObj", ici c'est comme une fonction passant des paramètres, traitant sell comme un paramètre formel, sellerObj est le paramètre réel, puis comment les paramètres réels du composant parent sont-ils transmis au composant enfant et par quelle méthode

4 Le composant parent transmet les données au composant enfant

Dans le parent. composant, sellerObj doit être exporté en tant que données et le composant enfant Le composant obtient les données du composant parent via des accessoires et le type de données doit être spécifié

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

Résumé :

1. Le sous-composant est créé dans props Un attribut utilisé pour recevoir la valeur passée par le composant parent

2. Enregistrer le composant enfant dans le parent composant

3. Ajouter le composant enfant dans la balise du composant enfant L'attribut créé dans les accessoires

4. attribue la valeur qui doit être transmise au sous-composant à l'attribut

5. Données d'appel

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

Détails :

support Ajoutez v-if ='sell.supports' lors de la liaison des données.

Raison : Création d'un dans le composant parent avant d'obtenir les données via axios. L'objet vide sellerObj est d'abord transmis au sous-composant. Si aucune donnée n'est envoyée au début, une erreur sous-définie sera signalée avec v-. si, si les données ne peuvent pas être reçues, elles ne seront pas analysées et aucune erreur ne sera signalée.

2. Couche contextuelle du composant d'en-tête (détails)

1. ) Définissez un statut, déterminez le statut pour contrôler l'affichage et le masquage

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>

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

(1) Lier la classe pour contrôler le type de taille des étoiles

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

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

Copier le code

(3) Définir des constantes pour contrôler l'état de chaque étoile

(4) Déterminer l'état de chaque travée grâce au type de calcul

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

(5) Ajouter un nom de classe à la travée en liant dynamiquement la classe

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

Je crois vous maîtrisez la méthode après avoir lu le cas dans cet article. Veuillez faire attention à php pour des choses plus intéressantes.

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

Développement d'une applet WeChat de la fonction de compression d'image

Formulaire d'opération dynamique js

Comment utiliser le prototype d'objet Object en JS

Comment gérer l'affichage incomplet d'une page en mode de compatibilité du navigateur 360

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!