WeChat アプレットコンポーネント間の通信とイベント

WeChat アプレットでは、コンポーネント間の通信を確立する 3 つの方法があります。

サブコンポーネント wxml 内

<text>子组件中count的值：{
   
   {num}}</text>

num は、対応する .js ファイルの属性です

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    num:Number
  }

<my-test6 num="{
   
   {s}}"></my-test6>

<View>~~~~~~~~~~~~~~</View>

<view>父组件count值为：{
   
   {s}}</view>

対応する .js ファイルで data を定義します

  data: {
    s:1
  }

このようにして、親コンポーネントの s の値 1 を子コンポーネントの属性 num に渡すことができます。

次の 4 つのステップに分けられます。

親コンポーネントの js ファイルで、カスタムイベントを通じて子コンポーネントに渡される関数を定義します。
親コンポーネントの wxml ファイルで、カスタムイベントを使用して、前の手順で定義した関数参照を子コンポーネントに渡します。
子コンポーネントの js で、 this.triggerEvent('custom event name') を呼び出して、親コンポーネントにデータを送信します。
親コンポーネントのjsで、子コンポーネントから渡されたデータをe.detailで取得する

上記の手順の今日のコードを記述します

ステップ 1: 親コンポーネントの js ファイルで、関数を定義します。

syncCount(e){
    
  }

ステップ 2: 親コンポーネントの wxml ファイルで、bind を使用して関数参照を子コンポーネントに渡します。

<my-test6 sum="{
   
   {count}}" bind:sync="syncCount"></my-test6>

ステップ 3: 子コンポーネントの js で、 this.triggerEvent('custom event name') を呼び出して親コンポーネントにデータを送信します

 addCount(){
      this.setData({
        num:this.properties.num + 1
      })
      this.triggerEvent('sync',{value:this.properties.num})
    }

ステップ 4: 親コンポーネントの js で、子コンポーネントから e.detail を介して渡されたデータを取得します。

syncCount(e){
    this.setData({
      s:e.detail.value
    })
  }

効果を実感:

コンポーネント通信

In the parent component, use this.selectComponent to get the instance of the child component. 子コンポーネントセレクターは、class または id のみを使用できます

親コンポーネントの wxml ファイルで、子コンポーネントのクラスセレクターを test6 として宣言します。

<my-test6 sum="{
   
   {count}}" bind:sync="syncCount" class="test6"></my-test6>

親コンポーネントに対応するjsファイルは、子コンポーネントのインスタンスを取得した後、子コンポーネントのメソッドを呼び出すことができます

getChild(){
    const child = this.selectComponent('.test6')
    console.log(child)
    child.addCount()
  }

WeChat アプレット コンポーネント間の通信とイベント