親コンポーネントが子コンポーネントに値を渡す
メソッド: WXML データバインディング
1. 親コンポーネント: 親コンポーネントのデータを子コンポーネントに直接バインドします。
//father.js
page({
demoData:'父组件向子组件传的数据',
})
//father.wxml，
<son fatherData='{
{demoData}}' ></son>
2. サブコンポーネント: プロパティで親コンポーネントのデータを受け取ります
//son.js
//properties为组件的对外属性，是属性名到属性设置的映射表
//this.data.fatherData,或this.properties.fatherData的方式都可以访问到properties内的值
Component({
properties: {
fatherData:{
type:String
}
},
//将父组件传递的数据在生命周期内打印出来
attached: function () {
// 在组件实例进入页面节点树时执行
console.log('父组件传过来的数据：'+this.data.fatherData) //父组件向子组件传的数据
},
})
子コンポーネントが親コンポーネントに値を渡す
メソッド: カスタムイベント
トリガーイベント
カスタム コンポーネントがイベントをトリガーするときは、triggerEvent メソッドを使用してイベント名、詳細オブジェクト、およびイベント オプションを指定する必要があります。
var myEventDetail = {} // detail对象，提供给事件监听函数(要传给父组件的数据)
var myEventOption = {} // 触发事件的选项
this.triggerEvent('myevent', myEventDetail, myEventOption)
イベントをトリガーするためのtriggerEventオプションには次のものが含まれます。
| オプション名 | タイプ | 必要ですか? | デフォルト値 | 説明する |
|---|---|---|---|---|
| 泡 | ブール値 | いいえ | 間違い | イベントが盛り上がるかどうか |
| 作曲された | ブール値 | いいえ | 間違い | イベントがコンポーネントの境界を越えることができるかどうか。これが false の場合、イベントはコンポーネントを参照するノード ツリー上でのみトリガーされ、他のコンポーネントには入りません。 |
| キャプチャフェーズ | ブール値 | いいえ | 間違い | イベントにキャプチャフェーズがあるかどうか |
サンプルコード
1. 親コンポーネントの wxml でカスタム イベントを子コンポーネントにバインドします。
//father.wxml
//在子组件上绑定自定义事件
<son bind:sendsondata='getfatherdata'></son>
2. サブコンポーネントの js でこのイベントをトリガーします
//son.js
//子组件触发自定义事件，并将组件内的数据传出去
this.triggerEvent('sendsondata', '子组件内的数据', )
3.親コンポーネントjs内のイベント関数で渡されたデータを受け取る
//father.js
methods:{
getfatherdata(res){
console.log('子组件传过来的数据:'+res.detial)
}
}