小程序 triggerEvent を用いる

1年 ago
夏樹, 風
1 minute

小程序のtriggerEventメソッドは、コンポーネント上で定義済みのカスタムイベントを発生させ、イベントハンドラー関数に引数を渡すために使用します。

ご利用方法は下記のとおりです。

  1. コンポーネント内にカスタムイベントを定義し、コンポーネントのpropertiesでcustomEventという名前のプロパティを定義できます：
Component({
properties: {
customEvent: {
type: null,
value: null,
observer: function(newVal, oldVal) {
this.triggerEvent('customEvent', newVal);
}
}
},
methods: {
// 自定义事件处理函数
handleEvent: function(event) {
console.log(event.detail);
}
}
})
  1. ページ内でコンポーネントを使用するときにカスタムイベントを送信するには、コンポーネントの `customEvent` プロパティーを設定します。
<custom-component customEvent="{{data}}"></custom-component>
  1. ページの JS ファイル内で、コンポーネントのカスタムイベントを監視して処理します。
Page({
data: {
data: 'Hello World',
},
// 监听组件上的自定义事件
handleEvent: function(event) {
console.log(event.detail); // 输出：Hello World
}
})

上で示す例では、コンポーネントの customEvent 属性が変化すると、コンポーネント内部の observer メソッドがトリガーされ、triggerEvent メソッドを呼び出してカスタムイベントをトリガーし、カスタムイベントの新しい値をパラメータとしてイベントハンドラー handleEvent に渡します。ページの handleEvent メソッドでは、event.detail から渡されたパラメータを取得できます。

bannerAds