Exemple de code de développement de composant d'en-tête Vue-js tutoriel-php.cn

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

小云云

Libérer： 2018-01-31 10:05:12

original

1756 Les gens l'ont consulté

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 &#39;./components/header/header&#39;

Copier après la connexion

2. Enregistrez le composant dans App.vue

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

Copier après la connexion

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>

Copier après la connexion

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 // 传递的类型 
 }
 }
 }

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

2. 🎜>

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

Copier après la connexion

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

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

Copier après la connexion

(2) Traverser les étoiles La quantité

Copier le code

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

Copier après la connexion

Le code est le suivant :

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

Copier après la connexion

(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 = &#39;on&#39; // 全星
const CLS_HALF = &#39;half&#39; // 半星
const CLS_OFF = &#39;off&#39;// 空星

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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!