今回は、私自身の開発経験を踏まえて、以下の観点で関連内容を解説します。
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のワンクリックインストールとパスワードポリシーの変更方法
通常、コンポーネントのライフサイクルは、ビジネス ロジックが始まる場所です。ビジネスシナリオが複雑で...
目次なぜパーティションが必要なのでしょうか?パーティショニング戦略パーティションの危険性なぜパーティ...
MSIインストールパッケージを使用してインストールするご使用のオペレーティング システムに応じて、対...
運用保守エンジニアは、初期段階では非常に大変な仕事です。この期間中、コンピューターの修理、ネットワー...
今日、外出中に同僚から、ウェブサイトのバックエンドにアクセスできないというメッセージが届きました。と...
目次序文応用フィルタードラッグファイル間での参照の受け渡しwxsはjsロジック層にパラメータを渡しま...
Robots.txt はプレーンテキスト ファイルであり、Web サイト管理者は、ロボットによるアク...
全文インデックスには特別なクエリ構文が必要です。全文検索はインデックスの有無にかかわらず実行できます...
この記事の例はすべて小さなプログラムで書かれていますが、実装される機能には影響しません。 wxmlル...
目次MySQL クライアント/サーバー プロトコルMySQL サーバーから高いパフォーマンスを得る必...
1. SQLを実行して表示する @@session.sql_mode を選択します。 グローバルレベ...
MySQL は、スウェーデンの会社 MySQL AB によって開発され、現在は Oracle が所有...
1. テーブル内のフィールドの大文字と小文字の区別を設定するgorm クエリを使用する場合、MySQ...
目次使用シナリオ達成方法1. 動的コンポーネントを配置する場所2. コンポーネントのインスタンスを取...
JavaScript ではオブジェクトを走査する順序は固定されていないと聞いたことがある人もいるかも...