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

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

青灯夜游
青灯夜游転載
2021-12-09 10:03:184706ブラウズ

ミニ プログラムの親コンポーネントと子コンポーネント間で値を転送し、メソッドを呼び出すにはどうすればよいですか?次の記事では、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 までご連絡ください。