ホームページ > WeChat アプレット > ミニプログラム開発 > ミニプログラムの親コンポーネントと子コンポーネント間で値を転送し、メソッドを呼び出すにはどうすればよいですか? (方法の概要)

ミニプログラムの親コンポーネントと子コンポーネント間で値を転送し、メソッドを呼び出すにはどうすればよいですか? (方法の概要)

青灯夜游
リリース: 2021-12-09 10:03:18
転載
4762 人が閲覧しました

ミニ プログラムの親コンポーネントと子コンポーネント間で値を転送し、メソッドを呼び出すにはどうすればよいですか?次の記事では、WeChat アプレットの親コンポーネントと子コンポーネント間の値の転送とメソッド呼び出しのいくつかの方法を要約して共有します。

ミニプログラムの親コンポーネントと子コンポーネント間で値を転送し、メソッドを呼び出すにはどうすればよいですか? (方法の概要)

カスタム コンポーネントのカプセル化

タブ コンポーネントの登録

コンポーネント フォルダー フォルダーの下にタブを作成し、右側のタブをクリックすると、新しいコンポーネントが表示されます。新しいコンポーネントをクリックすると、登録が成功します。

ミニプログラムの親コンポーネントと子コンポーネント間で値を転送し、メソッドを呼び出すにはどうすればよいですか? (方法の概要)

コンポーネントの使用法

コンポーネントを使用する必要があるページの json ページに、HTML タグなどのコンポーネントをインポートします。 wxml の下でそれを使用するだけです。

ミニプログラムの親コンポーネントと子コンポーネント間で値を転送し、メソッドを呼び出すにはどうすればよいですか? (方法の概要)

<tabs></tabs>
ログイン後にコピー

親コンポーネントと子コンポーネントとは何ですか?親コンポーネントはページに他のコンポーネントを導入する必要があるコンポーネントであり、子コンポーネントは導入されるコンポーネントです。親は属性を通じて子に値を渡し、子はメソッドを通じて親に値を渡します。

親コンポーネントは子コンポーネントに値を渡します

親コンポーネントはプロパティを通じて値を渡します

<childEle childParams="{{params}}"></childEle>
ログイン後にコピー

子コンポーネントはプロパティを通じて受け取ります:

properties: {
	childParams: { type: String }
}
ログイン後にコピー

子コンポーネントは親コンポーネントのメソッドを呼び出します

このメソッドは、子コンポーネントがパラメータを渡すメソッドとしても理解できます。親コンポーネント。

親コンポーネントはメソッドを定義します。childFun は子コンポーネントのメソッド名、fun は親コンポーネントのメソッド名です。私たちは、chidlFun を通じて楽しいことを呼び出します。

<childEle childParams="{{params}}" bind:childFun="fun"></childEle>
ログイン後にコピー

親コンポーネントのメソッド:

childFun(e){
	console.log(&#39;我是父组件的方法&#39;, e)
}
ログイン後にコピー

子コンポーネントのボタンをクリックして clickFun を実行すると、親コンポーネントのメソッドが呼び出されます

clickFun(){
	this.triggerEvent(&#39;childFun&#39;);//如果需要传递参数,直接写在triggerEvent的参数里即可
}
ログイン後にコピー

# #親コンポーネントは子コンポーネントのメソッドを呼び出します

<childEle id="childEle" childParams="{{params}}" bind:childFun="fun"></childEle>
ログイン後にコピー

親コンポーネントの onReady ライフサイクルで childEle 要素を取得します

onReady(){
	this.childEle = this.selectComponent(&#39;#childEle&#39;);
}
ログイン後にコピー

親コンポーネント childF のクリック イベント子コンポーネントのイベントを呼び出します:

<view bindtap="childF">我是父组件的点击事件</view>
ログイン後にコピー

親コンポーネントは子コンポーネントのメソッドをトリガーします:

childF(){
	this.childEle.foo()
}
ログイン後にコピー
ここでの foo は子コンポーネントのメソッドです。

[関連する学習の推奨事項:

小さなプログラム開発チュートリアル]

以上がミニプログラムの親コンポーネントと子コンポーネント間で値を転送し、メソッドを呼び出すにはどうすればよいですか? (方法の概要)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:juejin.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート