Comment développer via le composant d'en-tête dans Vue (tutoriel détaillé)

Cet article présente principalement l'explication détaillée du développement du composant d'en-tête Vue. Maintenant, je le partage avec vous et le donne comme référence.

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 composant enfant crée un attribut dans les accessoires pour recevoir La valeur transmise par le composant parent

2. Enregistrer le sous-composant dans le composant parent

3. Ajoutez les attributs créés dans les accessoires du sous-composant à la balise du sous-composant

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

5. Appel de 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>

Détails ：

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

Raison : Un objet vide sellerObj est créé dans le composant parent avant d'obtenir les données via axios. Transmettez-le en premier. Pour les sous-composants, si aucune donnée n'est transmise au début, une erreur sous-définie sera signalée. Avec v-if, si aucune donnée n'est reçue, elle le sera. ne sera pas analysé 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

(2) Liez l'événement de clic, modifiez le statut via la méthode des méthodes et contrôlez l'effet visible et caché

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. Classement par étoiles

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

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

(2) Parcourez le nombre d'étoiles

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

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

Copier le code

Le code est le suivant :

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

Ce qui précède c'est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

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

Articles connexes :

Développement de projets React

Utilisation de vue pour implémenter la méthode de définition d'itinéraire secondaire

Utilisez mint-ui pour réaliser l'effet de liaison à trois niveaux des provinces et des municipalités

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!