ミニプログラム開発におけるコンポーネント間の値の受け渡し方法（コード例）
この記事の内容は、小さなプログラムの開発におけるコンポーネント間の値の転送方法 (コード例) に関するものです。必要な方は参考にしていただければ幸いです。 。
1. コンポーネントの作成
WeChat 開発者ツールを開き、wxml、wxss、js、json
Wxml 内に次の 4 つのファイルが生成されます。 # #
<view>我是组件A</view>
Component({
behaviors: [],
properties: {
},
data: {
}, // 私有数据，可用于模版渲染
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () { },
moved: function () { },
detached: function () { },
methods: {
}
}){
"component": true,
"usingComponents": {}
}{
"usingComponents": {
"componentA": "../../components/child1/child1"
}
}<view> <view>微信小程序组件传参</view> <componentA /> </view>
#宣言: 次のように、A コンポーネントが親コンポーネント、B コンポーネントが子コンポーネントです。コンポーネント A はコンポーネント B にパラメータを渡します:
コンポーネント B をコンポーネント Aコンポーネント A の json に書き込みます: {
"component": true,
"usingComponents": {
"componentB": "../child2/child2"
}
}
<view>我是组件A</view>子组件内容：
コンポーネント B の JS で、次のように記述します:
Component({
behaviors: [],
properties: {
paramAtoB:String
},
data: {
}, // 私有数据，可用于模版渲染
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () { },
moved: function () { },
detached: function () { },
methods: {
}
})つまり、プロパティでコンポーネント A によって渡されるパラメーターの型を定義します
Write B コンポーネントの wxml 内:
<view style='border:2px solid gray;'>
<view style='text-align:center;'>我是组件B</view>
<view>A中传入的参数：{{paramAtoB}}</view>
</view>実際、B コンポーネントが A コンポーネントに導入されると、属性が渡されます。それに値を割り当てると、B コンポーネントはこの属性名 paramAtoB
4 を通じてその値を取得します。子コンポーネントは親コンポーネントにパラメータを渡します。ステートメント: A コンポーネントは親コンポーネントです。 、および B コンポーネント サブコンポーネントとして、B コンポーネントがパラメータを A コンポーネントに渡す方法は次のとおりです。
サブコンポーネントが親コンポーネントにパラメータを渡すには、最初にトリガー イベントを追加する必要があります。次のように、親コンポーネントがサブコンポーネントを導入するとき:
親コンポーネント内では、wxml:<view style='padding:20px;border:2px solid red;'>
<view style='text-align:center;'>我是组件A</view>
<view>
<view>A组件内容：</view>
<view>B组件传入参数：{{paramBtoA}}</view>
<componentB paramAtoB='我是A向B中传入的参数' bind:myevent="onMyEvent"/>
</view>
</view>myevent がバインドされたトリガー イベントです。 親コンポーネント A js: の
Component({
behaviors: [],
properties: {
},
data: {
}, // 私有数据，可用于模版渲染
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () { },
moved: function () { },
detached: function () { },
methods: {
onMyEvent:function(e){
this.setData({
paramBtoA: e.detail.paramBtoA
})
}
}
})onMyEvent は、サブコンポーネントによってトリガーされたときの関数です。
サブコンポーネント B の wxml:
<view style='border:2px solid gray;'>
<view style='text-align:center;'>我是组件B</view>
<view>A中传入的参数：{{paramAtoB}}</view>
<button bindtap='change'>向A中传入参数</button>
</view>ボタン クリック イベントがトリガーされるとすぐに、パラメーターを親コンポーネント A に渡すことができます。子コンポーネント B では、js:
Component({
behaviors: [],
properties: {
paramAtoB:String
},
data: {
}, // 私有数据，可用于模版渲染
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () { },
moved: function () { },
detached: function () { },
methods: {
change:function(){
this.triggerEvent('myevent', { paramBtoA:123});
}
}
})this.triggerEvent がイベントの後に実行されます。ボタンをクリックすると、myevent イベントがトリガーされます。パラメータ paramBtoA を親コンポーネントに渡します
Column
李三宗
ポストする
2日前に投稿
【小規模プログラム開発】コンポーネント間での値の受け渡し
小規模プログラム
読む 読むのに10分かかります[ミニプログラム開発] コンポーネント間での値の受け渡し1. コンポーネントの作成WeChat 開発者ツールを開きます。 , コンポーネントを作成すると、wxml、wxss、js、json
In wxml:
<view>我是组件A</view>
In js:
Component({
behaviors: [],
properties: {
},
data: {
}, // 私有数据，可用于模版渲染
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () { },
moved: function () { },
detached: function () { },
methods: {
}
})In json:
{
"component": true,
"usingComponents": {}
}を実行します。
{
"usingComponents": {
"componentA": "../../components/child1/child1"
}
}<view> <view>微信小程序组件传参</view> <componentA /> </view>
コンポーネント A に B コンポーネントを導入します
A コンポーネントの json に書き込みます:{
"component": true,
"usingComponents": {
"componentB": "../child2/child2"
}
}<view>我是组件A</view>
子组件内容：
ログイン後にコピーログイン後にコピー
js 内B コンポーネントの記述:
<view>我是组件A</view>子组件内容：
Component({
behaviors: [],
properties: {
paramAtoB:String
},
data: {
}, // 私有数据，可用于模版渲染
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () { },
moved: function () { },
detached: function () { },
methods: {
}
})コンポーネント B の wxml に記述:
<view style='border:2px solid gray;'>
<view style='text-align:center;'>我是组件B</view>
<view>A中传入的参数：{{paramAtoB}}</view>
</view>概要:
実際、A コンポーネントは B コンポーネントにパラメータを渡します。B コンポーネントが A コンポーネントに導入されると、属性 paramAtoB が渡され、それに値が割り当てられます。その後、B コンポーネントはこの属性名を通じてその値を取得します。 paramAtoB.4. サブコンポーネントが親コンポーネントにパラメータを渡す宣言: A コンポーネントが親コンポーネントであり、B コンポーネントがサブコンポーネントである方法は次のとおりです。 子コンポーネントから親コンポーネントにパラメータを渡すには、次のように、親コンポーネントが子コンポーネントを導入するときに、まずトリガー イベントを追加する必要があります。コンポーネント A wxml:
<view style='padding:20px;border:2px solid red;'>
<view style='text-align:center;'>我是组件A</view>
<view>
<view>A组件内容：</view>
<view>B组件传入参数：{{paramBtoA}}</view>
<componentB paramAtoB='我是A向B中传入的参数' bind:myevent="onMyEvent"/>
</view>
</view>myevent はバインドされたトリガー イベントです。
親コンポーネント A では、js:Component({
behaviors: [],
properties: {
},
data: {
}, // 私有数据，可用于模版渲染
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () { },
moved: function () { },
detached: function () { },
methods: {
onMyEvent:function(e){
this.setData({
paramBtoA: e.detail.paramBtoA
})
}
}
})onMyEvent が子コンポーネントによってトリガーされたときの関数
サブコンポーネント B では、wxml:
<view style='border:2px solid gray;'>
<view style='text-align:center;'>我是组件B</view>
<view>A中传入的参数：{{paramAtoB}}</view>
<button bindtap='change'>向A中传入参数</button>
</view>
Component({
behaviors: [],
properties: {
paramAtoB:String
},
data: {
}, // 私有数据，可用于模版渲染
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () { },
moved: function () { },
detached: function () { },
methods: {
change:function(){
this.triggerEvent('myevent', { paramBtoA:123});
}
}
})this.triggerEvent はボタンがクリックされた後に実行されるイベントで、myevent イベントをトリガーし、パラメーター paramBtoA を親コンポーネントに渡します
## ＃＃報告＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃ ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃
#興味があるかもしれません
以上がミニプログラム開発におけるコンポーネント間の値の受け渡し方法（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7343
9
1627
14
1352
46
1265
25
1214
29
Python を使用して WeChat アプレットを開発する
Jun 17, 2023 pm 06:34 PM
モバイル インターネット技術とスマートフォンの普及により、WeChat は人々の生活に欠かせないアプリケーションになりました。 WeChat ミニ プログラムを使用すると、アプリケーションをダウンロードしてインストールすることなく、ミニ プログラムを直接使用して、いくつかの簡単なニーズを解決できます。この記事では、Python を使用して WeChat アプレットを開発する方法を紹介します。 1. 準備 Python を使用して WeChat アプレットを開発する前に、関連する Python ライブラリをインストールする必要があります。ここでは、wxpy と itchat の 2 つのライブラリを使用することをお勧めします。 wxpy は WeChat マシンです
小さなプログラムでも反応できますか?
Dec 29, 2022 am 11:06 AM
ミニプログラムはreactを利用することができます 使い方: 1. 「react-reconciler」に基づいてレンダラーを実装し、DSLを生成します; 2. DSLを解析してレンダリングするためのミニプログラムコンポーネントを作成します; 3. npmをインストールし、開発者ビルドを実行しますツール内の npm; 4. パッケージを独自のページに導入し、API を使用して開発を完了します。
WeChat ミニ プログラムにカードめくり効果を実装する
Nov 21, 2023 am 10:55 AM
WeChat ミニ プログラムでのカードめくり効果の実装 WeChat ミニ プログラムでは、カードめくり効果の実装は、ユーザー エクスペリエンスとインターフェイス インタラクションの魅力を向上させることができる一般的なアニメーション効果です。以下では、WeChat アプレットでカードめくりの特殊効果を実装する方法と、関連するコード例を詳しく紹介します。まず、ミニ プログラムのページ レイアウト ファイルに 2 つのカード要素を定義する必要があります。1 つは前面のコンテンツを表示するため、もう 1 つは背面のコンテンツを表示するためです。具体的なサンプル コードは次のとおりです: <!--index.wxml- ->&l
uniapp がミニ プログラムと H5 の間で迅速な変換を実現する方法
Oct 20, 2023 pm 02:12 PM
uniapp がミニ プログラムと H5 の間で迅速な変換を実現するには、具体的なコード例が必要ですが、近年、モバイル インターネットの発展とスマートフォンの普及に伴い、ミニ プログラムと H5 は不可欠なアプリケーション形式となっています。クロスプラットフォーム開発フレームワークとして、uniapp は一連のコードに基づいて小規模プログラムと H5 間の変換を迅速に実現し、開発効率を大幅に向上させます。この記事では、uniapp がミニ プログラムと H5 の間で迅速な変換を実現する方法と、具体的なコード例を紹介します。 1. uniapp uniaの紹介
アリペイ、希少文字ライブラリを収集・補完する「漢字拾い-希少文字」ミニプログラムを開始
Oct 31, 2023 pm 09:25 PM
10月31日の当サイトのニュースによると、今年5月27日、アント・グループは「漢字拾いプロジェクト」の立ち上げを発表し、最近新たな進展を迎えた：アリペイが「漢字拾い-珍しい文字」ミニプログラムを開始協会からコレクションを収集する レア文字は、レア文字ライブラリを補完し、アリペイでのレア文字入力方法の改善に役立つように、レア文字に異なる入力エクスペリエンスを提供します。現在、ユーザーは「漢字ピックアップ」「珍文字」などのキーワードで検索することで「珍文字」アプレットに入ることができる。ミニプログラムでは、ユーザーがシステムで認識・入力されなかった珍しい文字の画像を送信し、確認後、Alipay のエンジニアがフォントライブラリに追加エントリを作成します。当サイトでは、発音が不明瞭な珍しい単語を対象とした最新の単語分割入力方法をミニプログラムで体験できることに注目しました。ユーザー解体
ミニプログラム登録の操作方法
Sep 13, 2023 pm 04:36 PM
ミニ プログラムの登録操作手順: 1. 個人 ID カード、法人営業許可証、法人 ID カードおよびその他の提出資料のコピーを準備します; 2. ミニ プログラム管理のバックグラウンドにログインします; 3. ミニ プログラム設定ページに入ります; 4. 「基本設定」を選択; 5. 出願情報を入力; 6. 出願資料をアップロード; 7. 出願申請を送信; 8. 審査結果を待ちます。出願が不合格の場合は、理由に応じて修正してください9. 出願のフォローアップ操作は可能です。
Java 言語による WeChat アプレット開発の概要
Jun 09, 2023 pm 10:40 PM
WeChat アプレットは、WeChat プラットフォーム上で実行できる軽量のアプリケーションで、ダウンロードやインストールが不要で、便利で高速です。 Java 言語は、エンタープライズ レベルのアプリケーション開発で広く使用されている言語であり、WeChat アプレットの開発にも使用できます。 Java 言語では、SpringBoot フレームワークとサードパーティのツールキットを使用して WeChat アプレットを開発できます。以下は、簡単な WeChat アプレット開発プロセスです。 WeChat ミニ プログラムを作成するには、まず、WeChat パブリック プラットフォームにミニ プログラムを登録する必要があります。登録が成功すると、次の情報を取得できます。
Python で簡単なチャット プログラムを作成するためのチュートリアル
May 08, 2023 pm 06:37 PM
実装アイデア: チャット ルームのさまざまな機能を処理するために、スレッドのサーバー側を確立します。x02 クライアントの確立はサーバーよりもはるかに簡単です。クライアントの機能はメッセージの送受信と、特定の文字を特定の規則に従って入力するため、クライアント側では、メッセージ受信専用とメッセージ送信専用の 2 つのスレッドを使用するだけで、さまざまな機能を使用できます。使用しないでください。
