【WeChatミニプログラム】コンポーネント間通信とサブコンポーネントのイベント取得インスタンスオブジェクト

1.0 序文

1.1 このメモを書いた理由

ミニプログラムの公式ドキュメントには大まかなコードしか記載されておらず、作者が見つけることができなかったので、初心者でも理解して使えるように分かりやすい手順を記録しています。

1.2 サブコンポーネントインスタンスオブジェクトを取得する役割

コンポーネントが参照され、親コンポーネントがリスニング関数を使用する場合、コンポーネントはイベントの発生をリッスンするときに、サブコンポーネントのインスタンスオブジェクトを取得することでサブコンポーネント内のメソッドを呼び出すことができます。

2.サンプルコード

2.1index.wxml（親コンポーネントのwxmlファイル）

<news2 class="news"></news2>

2.2 news.js (サブコンポーネントのjsファイル)

Component({
    
    
  methods: {
    
    
    Test01(Number){
    
    
      console.log("我收到的值是:"+Number)
    }
  }
})

親コンポーネントによって呼び出される Test01 メソッドを定義する

2.3 Index.js（親コンポーネントのjsファイル）

Page({
    
    
  getChildComponent: function () {
    
    
    const child = this.selectComponent('.news');
    console.log('子组件实例为：', child);
    child.Test01(10)
  },
  onLoad: function (options) {
    
    
    this.getChildComponent()
  },
})

onLoad 関数は、getChildComponent() 関数を呼び出し、this.selectComponent メソッドを使用するために使用されます。親コンポーネントは、子コンポーネント
の this であるクラス my-component を持つ子コンポーネントインスタンスオブジェクトを取得します。
- セレクター一致セレクター構文
  - ID セレクター: #the-id
  - クラスセレクター (連続して複数指定できます): .a-class.another-class (この記事で使用される構文)
  - 子要素セレクター: .the-parent > .the-child
  - 子孫セレクター: .the-ancestor .the-descendant
  - カスタムコンポーネント間の子孫セレクター: .the-ancestor >>> .the-descendant
  - 複数のセレクターの結合: #a-node,.some-other-nodes
child.Test01 は子コンポーネントのメソッドであり、子コンポーネントの this.Test01() に相当します。

3. 注意事項

1. 取得したサブコンポーネントのインスタンスが空の場合は、サブコンポーネントが表示されるかどうかを考慮する必要があります。

筆者がこの方法を使用したところ、テストケースは成功しましたが、サブコンポーネントのインスタンスを取得するための具体的なコードが常に空だったので、ずっと模索した結果、wxmlで使用しているサブコンポーネントが表示されている場合のみ使用できることが分かりました。、のような

<news  class="news" wx:if="{
    
    {true}}"></news>

次を使用してサブコンポーネントのインスタンスを取得できます。

<news  class="news" wx:if="{
    
    {false}}"></news>

表示されないためインスタンスが取得できません。

参考資料：
[ミニプログラムの公式ドキュメント]
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html
https://developers.weixin.qq.com/miniprogram/dev /api/wxml/SelectorQuery.select.html