今回は、私自身の開発経験を踏まえて、以下の観点で関連内容を解説します。
1. ページはどのようにしてコンポーネントにデータを渡すのでしょうか?最も一般的で標準化された方法は、データ リスナー オブザーバーを設定することです。 コンポーネントscがページに導入されていると仮定します "コンポーネントの使用": { "sc":"" } ページ上のデータ リストの変更を監視するリスナーを構成するには、コンポーネントを次のようにページに記述します。 <sc リスト="{{リスト}}" > </sc> コンポーネント内のリスナーは以下のように記述します。ページ内の `list` の値が変わるたびに `observer` リスナーがトリガーされ、変更された値が出力されます。 プロパティ: リスト:{ タイプ:配列、 オブザーバー: 関数 (newVal, oldVal){ コンソールログ(新しい値) } } } 同様に、動的な値の送信に加えて、このメソッドは静的な値を直接渡すこともできます。つまり、オブザーバー リスナーを呼び出す必要はありません。コンポーネントでは、this.properties.* を直接使用して、プロパティの値を取得できます(* は各プロパティ値の名前を表します)。 2. コンポーネントはどのようにしてページにデータを渡すのでしょうか?コンポーネントは、データ転送の効果を実現するためにページ データの変更を監視するリスナーを設定できるため、ページもリスナーを使用して、コンポーネントによってトリガーされた情報転送を監視することができます。 上記のコンポーネントを例に挙げて、ページに情報を送信するにはどうすればよいでしょうか。 ページでコンポーネントリスナーを構成する コンポーネントリスナー(e){ info = e.detail; とします。 } コンポーネントはイベントを選択し、リスナーをバインドします <sc bind:listener="コンポーネントリスナー" > </sc> コンポーネントからページに入力を渡すには、コンポーネント内の対応するイベントをトリガーするだけです。e.detail は渡されるデータです。 this.triggerEvent('リスナー',{func,tid}); 3. ページはコンポーネント内の関数をどのように呼び出すか特定のロジックでトリガーする必要がある関数 handleCloseInput を含むコンポーネント comment-bottom を導入して使用するとします。 コンポーネント内の関数を使用する場合は、ページ上の DOM 操作を通じてコンポーネントを選択し、コンポーネント内の関数を呼び出すことができるように、コンポーネントの一意の ID を構成する必要があります。 <コメントボトムid="コメントボトム"></コメントボトム> ページ上のコンポーネント内の関数の呼び出しロジックは次のとおりです。 this.commentBottom = this.selectComponent("#commentBottom"); コメント下部のハンドルを閉じる入力(); 4. コンポーネントはページ上の関数をどのように呼び出すのでしょうか?ページにデータを転送する上記の方法は、実際にはページ内の関数を呼び出します。関数マッピングとしてロジックと使用法を理解することができます。 <コンポーネント バインド:componentfunc="pagefun"></コンポーネント> トリガーを使用して componentfunc をトリガーすると、ページ内の pagefunc は bind: function マッピング関係を通じてトリガーされます。 次に、ページ スタックを介してページ内の関数を呼び出すこともできます。コンポーネントはページのスタック領域を占有しないため、コンポーネント内で getCurrentPages を使用して、対応するページのデータとメソッドを取得できます。 var allpages = getCurrentPages(); //すべてのページデータを取得します。 var nowpage = allpages[allpages.length - 1].data; //現在のページのデータを取得します。 var nowpage = allpages[allpages.length - 1]; //データとメソッドを含むページを取得します この部分のコンテンツは私の記事の 1 つからの抜粋です。参照ファイルにアドレスを記載しておきます。 結論:コンポーネント間のデータ転送は、コンポーネントとページ間のデータ転送とほとんど変わらず、コンポーネントをコンポーネント内にネストすることもできます。 参考文献 WeChat ミニプログラム開発スキルの概要 (I) - データ転送と保存 WeChatミニプログラムページとコンポーネント間の情報伝達と関数呼び出しに関するこの記事はこれで終わりです。WeChatミニプログラムページとコンポーネントの関連コンテンツについては、123WORDPRESS.COMで以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も123WORDPRESS.COMを応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux でバックグラウンドで実行中のプログラムを表示して終了する方法
>>: MySQL 5.7のワンクリックインストールとパスワードポリシーの変更方法
使用される Docker イメージが増えるにつれて、イメージを保存する場所、つまりウェアハウスが必要...
目次長すぎて読めないコンポーネントスタイルの分離デモテスト優先度ページの分離構成参考文献ネイティブ ...
RGBカラーテーブル色英語名RGB 16色雪255 250 250 #FFFAFAゴーストホワイト2...
最近は学ぶべき知識が多すぎて、どれを先に学べばいいのかわかりません。このブログはもともとxamari...
目次1. はじめに2. 再帰3. コールバック関数3.1 匿名コールバック関数3.2 パラメータ付き...
実際の業務では、Excel からデータベースにデータをインポートする必要がある場合があります。データ...
本来の意図このツールを作った理由は、コンピューターを使用しているときにいつでも毎日の仕事や生活を記録...
もちろん、ページ パフォーマンスの最適化に関する個人的な経験も含まれています。ここでいくつかの点につ...
1 はじめにスレッド技術は 1960 年代にすでに提案されていましたが、マルチスレッドがオペレーティ...
概要今日は主に、MySQL データベースから binlog ログを正しく削除する方法を紹介します。ロ...
1. はじめにSupervisor は Python で開発された汎用プロセス管理プログラムです。通...
編集者:この記事では、インタラクティブデザインがブランドコミュニケーションチェーン全体で果たすべき役...
本日の記事では、主にNginxのリロードプロセスについて紹介します。実は前回の記事では、nginx ...
以下は、Flex レイアウトを使用した棒グラフです。 HTML: <div class=&qu...
書き順の重要性ブラウザのリフローを減らし、ブラウザのDOMレンダリングパフォーマンスを向上させる①:...