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

亚连
リリース: 2018-06-09 13:52:31
オリジナル
2141 人が閲覧しました

この記事では主に 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 にプロパティを作成します

    親コンポーネントにサブコンポーネントを登録します
  1. サブコンポーネントの props で作成した属性をサブコンポーネントのタグに追加します
  2. サブコンポーネントの属性に渡す必要がある値
  3. 5. data の呼び出し
  4. <v-header :sell="sellerObj"></v-header>
    ログイン後にコピー

    詳細:

  5. 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) 数値をトラバースします星の数

コードをコピー

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

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

// 利用 computed 属性
<p class="star" :class="starSizeType"></p>
ログイン後にコピー

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

computed: {
 starSizeType() { // 返回 星级的大小类型 48/36/24
  return &#39;star-&#39; + this.size;
 }
}
ログイン後にコピー

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

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

関連記事:

reactプロジェクト開発

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

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

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート