WeChatミニプログラムページとコンポーネント間の情報伝達と機能呼び出し

今回は、私自身の開発経験を踏まえて、以下の観点で関連内容を解説します。

1. ページからコンポーネントにデータを渡す方法
2. コンポーネントがページにデータを渡す方法
3. ページはコンポーネント内の関数をどのように呼び出しますか?
4. コンポーネントはページ内でどのように関数を呼び出すのでしょうか?
   

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を応援していただければ幸いです。