ヘッダーコンポーネントの使い方

今回は、headerコンポーネントの使い方と、headerコンポーネントを使用する際の注意点を紹介します。実際のケースを見てみましょう。

1. ヘッダーコンポーネント開発におけるデータ転送

1. App.vue はコンポーネント

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

を導入します2. コンポーネントを App.vue に登録します

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

説明: :sell= 「sellerObj」、ここではパラメータを渡す関数と同じように、sell は仮パラメータとして扱われ、sellerObj が実パラメータです。では、親コンポーネントの実パラメータはどのように、どのようなメソッドを通じて子コンポーネントに渡されるのでしょうか。親コンポーネントは子コンポーネントにデータを渡します

親コンポーネントでは、sellerObj をデータとしてエクスポートする必要があります。子コンポーネントは props を通じて親コンポーネントからデータを取得し、

データ型

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

を指定します。概要:

子コンポーネントはpropsに属性を作成して親コンポーネントから渡された値を受け取る

1. 親コンポーネントにサブコンポーネントを登録

2. サブコンポーネントのpropsで作成した属性をサブコンポーネントタグに追加

3. 代入サブコンポーネントに属性に渡す必要がある値

5. データの呼び出し

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

   詳細:

support データをバインドするときに v-if ='sell.supports' を追加します

理由: 空のものはaxios を通じてデータを取得する前に、親コンポーネントで作成されます。最初にデータが送信されない場合、v-if ではアンダーファインエラーが報告されます。解析されず、エラーも報告されません。

2. ヘッダーコンポーネントのポップアップレイヤー(詳細)

1. ポップアップマスクレイヤー

(1) 状態を設定し、表示・非表示を制御する

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

data (){
 return {
 detailShow:false
 }
}

(2)クリック イベントをバインドします。メソッド メソッドは状態を変更し、表示効果と非表示効果を制御します

<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. 星の評価

(1) 星のサイズの種類を制御するクラスをバインドします

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

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

(2) 数値をトラバースします星の数

コードをコピー

コードは次のとおりです:

(3) 各スターのステータスを制御する定数を定義します

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

(4) 計算によって各スパンのタイプを決定します

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

(5) クラスを動的にバインドしてスパンにクラス名を追加します

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

この記事の事例を読んだ後は、あなたはそれをマスターしたと思います。さらにエキサイティングな方法については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

画像圧縮機能のWeChatアプレット開発

js動的操作フォーム

JSでのObjectオブジェクトのプロトタイプの使い方

360ブラウザ互換モードページ 使い方表示が不完全な場合の対処法

以上がヘッダーコンポーネントの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。