위 챗 애플 릿 사용자 정의 구성 요소 패키지 및 부자 간 구성 요소 전송 방법

먼저 필요 한 page 에 직접 쓸 수 있 고 구성 요 소 를 추출 할 수 있 습 니 다.사용자 정의 구성 요 소 는 wxzx-xxx 이름 을 권장 합 니 다.
홈 페이지 주소
예 를 들 어,우리 가 봉 인 된 구성 요소 의 이름 은**wxzx-loadmore 입 니 다.

wxzx-loadmore.wxml

<view hidden="{{response.length < 1}}">
  <view class="weui-loadmore" hidden="{{is_loadmore}}">
    <view class="weui-loading"></view>
    <view class="weui-loadmore__tips">    </view>
  </view>
  <view class="weui-loadmore weui-loadmore_line" hidden="{{!is_loadmore}}">
    <text class="weui-loadmore__tips">{{tip}}</text>
  </view>
</view>

여 기 는 index.wxml 에 필요 한 구성 요소 로 봉 인 된 코드 를 그대로 복사 하 는 것 입 니 다.
wxzx-loadmore.js

Component({
  /**
   *        
   */
  properties: {
    response: {
      type: String,
      value: ''
    },
    is_loadmore: {
      type: Boolean,
      value: false
    },
    tip: {
      type: String,
      value: '      '
    }
  },

  /**
   *        
   */
  data: {

  },

  /**
   *        
   */
  methods: {
     emit: function(data) {
      //             
      let val = data,
        my_event_detail = {
          val: val
        }
      // myevent       ，      
      this.triggerEvent('myevent', my_event_detail)
       /*
               bind:myevent="get_emit",          get_emit  
       */
    },
  }
})

index.wxml 부모 구성 요소

<wxzx-loadmore 
    response="{{comment_list}}"
    is_loadmore="{{is_loadmore}}"
    bind:myevent="get_emit"
    ></wxzx-loadmore>
<!--              ，                  -->

index.js 중

//         
  get_emit: function (e) {
    this.setData({
      is_show: e.detail.val
    })
  },

index.json 구성 요 소 를 도입 해 야 합 니 다.부모 페이지 에서 하위 구성 요 소 를 참조 하면 json 파일 에 도입 합 니 다.

{
  "usingComponents": {
    "wxzx-loadmore": "/component/wxzx-loadmore/wxzx-loadmore"
  }
}

부모 구성 요소 하위 구성 요소 로 전송
성명:A 구성 요 소 는 부모 구성 요소 이 고 B 구성 요 소 는 하위 구성 요소 이 며 다음은 A 구성 요소 가 B 구성 요소 에 전달 하 는 것 입 니 다.
A 구성 요소 에 B 구성 요 소 를 도입 합 니 다.
A 구성 요소 의 json 에 쓰기:

{
"component": true,
"usingComponents": {
"componentB": "../child2/child2"
}
}

A 구성 요소 의 wxml 에 쓰기:

<view>    A</view>
<view>
<view>     ：</view>
<componentB paramAtoB='  A B      '/>
</view>

B 구성 요소 의 js 에 쓰기:

Component({

behaviors: [],

properties: {
paramAtoB:String
},
data: {

}, //     ，       

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

methods: {

}

})

properties 에서 A 구성 요소 가 전달 할 매개 변수 형식 을 정의 합 니 다.
B 구성 요소 의 wxml 에 쓰기:

<view style='border:2px solid gray;'>
<view style='text-align:center;'>    B</view>
<view>A      ：{{paramAtoB}}</view>
</view>

요약:A 구성 요 소 는 B 구성 요소 에 인삼 을 전달 합 니 다.사실은 A 구성 요소 에 B 구성 요 소 를 도입 할 때 속성 paramAtoB 를 가 져 오고 값 을 부여 합 니 다.그리고 B 구성 요 소 는 이 속성 이름 paramAtoB 를 통 해 값 을 가 져 옵 니 다.
하위 구성 요소 가 부모 구성 요소 로 전 송 됩 니 다.
성명:A 구성 요 소 는 부모 구성 요소 이 고 B 구성 요 소 는 하위 구성 요소 이 며 다음은 B 구성 요소 가 A 구성 요소 에 전달 하 는 것 입 니 다.
하위 구성 요 소 를 부모 구성 요소 에 전달 하려 면 먼저 부모 구성 요소 가 하위 구성 요 소 를 도입 할 때 트리거 이 벤트 를 추가 해 야 합 니 다.다음 과 같 습 니 다.
부모 구성 요소 A 에서 wxml:

<view style='padding:20px;border:2px solid red;'>
<view style='text-align:center;'>    A</view>
<view>
<view>A    ：</view>
<view>B      ：{{paramBtoA}}</view>
<componentB paramAtoB='  A B      ' bind:myevent="onMyEvent"/>
</view>

</view>

my 이벤트 가 바 인 딩 트리거 이벤트 입 니 다.
부모 구성 요소 A 에서 js:

Component({

behaviors: [],

properties: {

},
data: {

}, //     ，       

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

methods: {
onMyEvent:function(e){
this.setData({
paramBtoA: e.detail.paramBtoA
})
}
}

})

onMyEvent 는 이불 구성 요소 가 실 행 될 때의 함수 입 니 다.
하위 구성 요소 B 에서 wxml:

<view style='border:2px solid gray;'>
<view style='text-align:center;'>    B</view>
<view>A      ：{{paramAtoB}}</view>
<button bindtap='change'> A     </button>
</view>

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});
}
}

})

this.triggerEvent 는 단 추 를 누 른 후에 실 행 된 이벤트 입 니 다.my event 이 벤트 를 촉발 하고 매개 변수 paramBtoA 를 부모 구성 요소 에 들 어 갑 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.