ホームページ >WeChat アプレット >ミニプログラム開発 >ヘッダーコンポーネントの使い方
今回は、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></v-header>を指定します。概要: 子コンポーネントはpropsに属性を作成して親コンポーネントから渡された値を受け取る
export default { props:{ // 子组件获取 父组件 数据 sell:{ type:Object // 传递的类型 } } }
詳細:
理由: 空のものはaxios を通じてデータを取得する前に、親コンポーネントで作成されます。最初にデータが送信されない場合、v-if ではアンダーファインエラーが報告されます。解析されず、エラーも報告されません。
2. ヘッダーコンポーネントのポップアップレイヤー(詳細) 1. ポップアップマスクレイヤー(1) 状態を設定し、表示・非表示を制御する
<p> <img src="/static/imghwm/default1.png" data-src="sell.avatar" class="lazy" alt="ヘッダーコンポーネントの使い方" > </p> <span>{{sell.name}}</span> <p> {{sell.description + '/' + sell.deliveryTime + '分钟送达'}} </p>
data (){ return { detailShow:false } }
(2)クリック イベントをバインドします。メソッド メソッドは状態を変更し、表示効果と非表示効果を制御します
<p></p>
<p></p>
(1) 星のサイズの種類を制御するクラスをバインドします
methods:{ showDetails () { this.detailShow=true }, hideDetail () { this.detailShow=false } }
// 利用 computed 属性 <p></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'// 空星
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この記事の事例を読んだ後は、あなたはそれをマスターしたと思います。さらにエキサイティングな方法については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
画像圧縮機能のWeChatアプレット開発<p></p> <p></p>
以上がヘッダーコンポーネントの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。