WeChat 애플릿의 구성요소 통신 소개(코드 예)

이 글은 WeChat 미니 프로그램의 구성요소 통신(코드 예제)을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

이 문서에서는 주로 구성 요소 통신에 대해 설명합니다.

(1) 상위 구성 요소가 하위 구성 요소에 값을 전달합니다.

 <header title=&#39;{{title}}&#39; bind:fn=&#39;fn&#39; id=&#39;header&#39;></header>

title='{{title}}'을 통해 하위 구성 요소에 매개 변수를 전달합니다.

하위 구성 요소가 매개 변수를 받습니다.

Component({
  properties: {
    title: {       // 属性名 type: Number, // 类型（必填）
      type: String,//目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
    },
    fn: {      
      type: Function,
    },
  },
  data: {
      
  },
  methods: {
    // 子组件调用父组件方法
    childFn() {
      console.log(this.data.title)
      this.triggerEvent("fn");
      //triggerEvent函数接受三个值：事件名称、数据、选项值  
    }
  }
})

메소드의 제목을 사용하면 this.data.title을 직접 얻을 수 있습니다.

bind:fn='fn'을 통해 하위 구성 요소에 메소드를 전달합니다.

메소드도 속성에서 수신하고 메소드에서 정의해야 합니다. 새로운 메소드인 this.triggerEvent( "fn")은 상위 구성 요소가 전달한 메서드를 받습니다

(2) 상위 구성 요소는 하위 구성 요소 데이터 및 메서드를 호출합니다.

먼저 상위 구성 요소 js onReady 라이프 사이클

onReady: function () {
    //获得popup组件
    this.header= this.selectComponent("#header");
},

에서 구성 요소를 가져옵니다. 예를 들어 하위 구성요소의 함수 메소드

 // 调用子组件方法
  fn(){
    this.header.fn() //子组件的方法
  },

하위 구성요소의 데이터를 호출하면 this.header.msg

를 통해 하위 구성요소의 데이터를 직접 가져올 수 있습니다.

위 내용은 WeChat 애플릿의 구성요소 통신 소개(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!