この記事では主に 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 にプロパティを作成します
<v-header :sell="sellerObj"></v-header>
詳細:
理由: 空のオブジェクト sellObj がaxios を介してデータを取得する前に親コンポーネントで作成されます。最初にデータが送信されない場合、v-if ではデータを受信できない場合、アンダーファインエラーは報告されません。解析され、エラーは報告されません。
2. ヘッダーコンポーネントのポップアップレイヤー(詳細) 1. ポップアップマスクレイヤー(1) 状態を設定し、表示・非表示を制御する
export default { props:{ // 子组件获取 父组件 数据 sell:{ type:Object // 传递的类型 } } }
<p class="logo"> <img :src="sell.avatar" alt="" width='64' height='64'/> </p> <span class="name">{{sell.name}}</span> <p class="description"> {{sell.description + '/' + sell.deliveryTime + '分钟送达'}} </p>
(2)クリック イベントをバインドします。メソッド メソッドは状態を変更し、表示効果と非表示効果を制御しますdata (){
return {
detailShow:false
}
}
<p v-if="detailShow" class="detail"></p>
(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>
computed: { starSizeType() { // 返回 星级的大小类型 48/36/24 return 'star-' + this.size; } }
以上が皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。
関連記事:
reactプロジェクト開発 vueを使って2次ルート設定方法を実装mint-uiを使って州と市町村の3層連携効果を実現以上がVue のヘッダー コンポーネントを使用して開発する方法 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。