Vue のヘッダー コンポーネントを使用して開発する方法 (詳細なチュートリアル)

この記事では主に Vue ヘッダーコンポーネント開発の詳細な説明を紹介しますので、参考にしてください。

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 を通じて親コンポーネントからデータを取得し、データ型を指定します。

子コンポーネントは、親コンポーネントを受け取るために props にプロパティを作成します

親コンポーネントにサブコンポーネントを登録します
サブコンポーネントの props で作成した属性をサブコンポーネントのタグに追加します
サブコンポーネントの属性に渡す必要がある値
5. data の呼び出し

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

   詳細:

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

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

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

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

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

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

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

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

data (){
 return {
 detailShow:false
 }
}

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

2. 星の評価

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

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

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

コードをコピー

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

f34e4e128b5ca5b05f1e21dad05fe698 54bdf357c58b8a65c66d7c19c8e4d114

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

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

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

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

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

rreee

以上が皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。

関連記事:

reactプロジェクト開発

vueを使って2次ルート設定方法を実装

mint-uiを使って州と市町村の3層連携効果を実現

以上がVue のヘッダー コンポーネントを使用して開発する方法 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。