[위챗 미니 프로그램] 컴포넌트 간 통신 및 이벤트 – 하위 컴포넌트의 인스턴스 객체 획득

1.0 서문

1.1 내가 이 글을 쓴 이유

        미니 프로그램의 공식 문서에는 작성자가 찾을 수 없는 대략적인 코드만 나와 있기 때문에 초보자도 쉽게 이해하고 사용할 수 있도록 과정을 알기 쉽게 기록했다.

1.2 하위 컴포넌트 인스턴스 객체를 획득하는 역할

        컴포넌트가 참조되고 상위 컴포넌트가 청취 함수를 사용할 때, 컴포넌트가 이벤트 발생을 청취하면 하위 컴포넌트 인스턴스 객체를 얻어 하위 컴포넌트의 메소드를 호출할 수 있습니다.

2.예제 코드

2.1 index.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-comComponent 클래스를 통해 하위 컴포넌트 인스턴스 객체를 얻습니다 .
  • 선택기 일치 선택기 구문
    • 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-comComponent/events.html
https://developers.weixin.qq.com/miniprogram/dev/ api/wxml/SelectorQuery.select.html