Exemple de code de développement de composant d'en-tête Vue

Cet article vous présente principalement l'explication détaillée du développement des composants d'en-tête Vue et vous donne une référence. J'espère que vous aurez une compréhension plus approfondie du développement des composants Vue.

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

1. App.vue introduit les composants

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

2. Enregistrez le composant dans App.vue

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

3. Utilisez le composant

Explication : :sell="sellerObj", ici, sell est traité comme un paramètre formel tout comme un paramètre de fonction est passé, et sellerObj est le paramètre réel. Alors, comment les paramètres réels du composant parent sont-ils transmis au. composant enfant et via quoi

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

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

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

Résumé :

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

Le composant enfant crée une propriété dans props pour recevoir la valeur transmise par le composant parent
Enregistrer le sous-composant dans le composant parent
Ajouter les propriétés créées dans le sous-composant props dans le sous-composant balise
Attribuez la valeur qui doit être transmise au sous-composant à l'attribut
5. 🎜>

Détails :

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

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

Raison : Avant d'obtenir les données via axios, nous créez un objet sellerObj vide dans le composant parent et transmettez-le d'abord à l'enfant. Si aucune donnée n'est envoyée au composant au début, une erreur sous-définie sera signalée avec v-if, si les données ne peuvent pas être reçues, elles le seront. ne sera pas analysé et aucune erreur ne sera signalée.

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

1. ) Définir un statut, déterminer le statut pour contrôler l'affichage et masquer

(2) Événement de clic de liaison, changer via les méthodes méthode Statut, contrôler les effets visibles et invisibles

data (){
 return {
 detailShow:false
 }
}

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

2. 🎜>

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

(1) Lier la classe pour contrôler le type de taille d'étoile

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

(2) Traverser les étoiles La quantité

Copier le code

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

Le code est le suivant :

4b097d3b947da478dd6d1685bcd8ca9554bdf357c58b8a65c66d7c19c8e4d114

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

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

(4) Déterminer le type de chaque travée par calcul

(5) Ajouter un nom de classe à l'étendue en liant dynamiquement la classe

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

Recommandations associées :

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

Exemple détaillé d'informations de demande de configuration jQuery dans l'en-tête

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

Explication détaillée de l'envoi de données personnalisées par php via l'en-tête

Résumé de l'utilisation de l'en-tête php

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!