위 챗 애플 릿 - 부자 구성 요소 전송 및 방법 호출

4031 단어 위 챗 애플 릿
부모 구성 요소 하위 구성 요소 로 전송
A 구성 요 소 는 부모 구성 요소 이 고 B 구성 요 소 는 하위 구성 요소 이 며 다음은 A 구성 요소 가 B 구성 요소 에 전달 하 는 것 입 니 다.
A 구성 요소 에 B 구성 요소 도입 (부모 구성 요소 하위 구성 요소 도입)
A 구성 요소 의 json 에 쓰기 (부모 구성 요소):
{
    "component": true,
    "usingComponents": {
       "componentB": "../child/child"
    }
}

A 구성 요소 의 wxml 에 쓰기 (부모 구성 요소):
    A

   
   

B 구성 요소 의 js 에 쓰기 (하위 구성 요소): 
Component({
    behaviors: [],
    properties: {  //  properties               , vueprops  
        paramAtoB:String
    },
    data: {},  

    //       ,     ,    methods        
    attached: function () { },
    moved: function () { },
    detached: function () { },

    methods: {
 
    }
})

B 구성 요소 의 wxml 에 쓰기 (하위 구성 요소):

       B
  A      :{{paramAtoB}}

요약: A 구성 요 소 는 B 구성 요소 에 인삼 을 전달 합 니 다. 사실은 A 구성 요소 에 B 구성 요 소 를 도입 할 때 속성 paramAtoB 를 가 져 오고 값 을 부여 합 니 다. 그리고 B 구성 요 소 는 이 속성 이름 paramAtoB 를 통 해 값 을 가 져 옵 니 다.
혹은   methods 의 사용자 정의 함수 에서 this. data. paramAtoB 를 통 해 받 을 수 있 습 니 다.
하위 구성 요소 호출 방법
부모 구성 요소 인덱스 구성 요소  component - name, 그리고 id 를 통 해 방법 을 호출 합 니 다 (주: 이 사례 는 상기 사례 와 아무런 관련 이 없습니다)
onload(){
    this.selectComponent("#componentId").subComponentMethod();
}

 
하위 구성 요소 가 부모 구성 요소 로 전 송 됩 니 다.
하위 구성 요 소 를 부모 구성 요소 에 전달 하려 면 먼저 부모 구성 요소 가 하위 구성 요 소 를 도입 할 때 트리거 이 벤트 를 추가 해 야 합 니 다. 다음 과 같 습 니 다.
하위 구성 요소 B 에서 wxml:

        B
    A      :{{paramAtoB}}
    

button 단 추 를 누 르 면 이벤트 가 발생 하면 부모 구성 요소 A 에 매개 변 수 를 입력 할 수 있 습 니 다. 하위 구성 요소 B 에서 js:
Component({
    behaviors: [],
    properties: {
        paramAtoB:String
    },
    data: {}, 
 
    //       ,     ,    methods        
    attached: function () { },
    moved: function () { },
    detached: function () { },
 
    methods: {
        change:function(){
            this.triggerEvent('myevent', { paramBtoA:123});
        }
    }
})

부모 구성 요소 A 에서 wxml:

        A
    
        A    :
        B      :{{paramBtoA}}
        
    

부모 구성 요소 A 에서 js:
Component({
    behaviors: [],
    properties: {
 
    },
    data: {}, 

    //       ,     ,    methods        
    attached: function () { },
    moved: function () { },
    detached: function () { },
 
    methods: {
        onMyEvent:function(e){   //onMyEvent             
            this.setData({
                paramBtoA: e.detail.paramBtoA
            })
        }
    }
})

 
그리고 소개:
예 를 들 어 하위 구성 요소 의 입력 상자 값
 

하위 구성 요소 의 method 에서 함 수 를 정의 합 니 다. 즉, wxml 에서 bininput 의 bindCode 방법 입 니 다.
bindCode: function (e) {
      var that = this;
      var val = e.detail.value; //        
      var myEventDetail = {
        val: val
      } // detail  ,         
      this.triggerEvent('myevent', myEventDetail) //myevent       ,      
}

부모 구성 요소 가 져 오기:
**bind:myevent="onGetCode"**        (myevent                )
//     ,e.detail.val      
onGetCode:function(e){
    this.setData({
      code:e.detail.val
    })
  },

 

좋은 웹페이지 즐겨찾기