1. 程式人生 > >微信小程式元件通訊(一)

微信小程式元件通訊(一)

  當我們擼前端頁面的時候,當發現一個頁面內容很多、且有一定的分類,就應當考慮是否需要將頁面拆分成一個個元件。當使用元件的時候,不可避免的需要知道父子頁面通訊以及兄弟頁面的通訊。

  1、父向子通訊 是通過properity去傳遞即可。properity是元件對外屬性,有三個屬性:type(必須)、value、observer。

  父元件:

<view>*********我是父元件********</view>
<view>父元件的文字</view>
<view>這是childB文字輸入框傳的值{{paramB}}</view
> <view>*****我是子元件A*******</view> <childA dataChildA='{{gotoChildA}}'/>

  子元件:先在properity定義傳遞的引數,然後就可以直接在wxml中獲得這個引數

properties: {
    dataChildA:String
},
<view>我是childA的內容</view>
<view>{{dataChildA}}</view>

  2、子向父通訊 可以通過triggerEvent進行傳遞引數

  子元件:

<view>我是childB的內容</view>
<input type='text' bind:change='getData' placeholder='請填寫資訊'/>
getData(e){
    console.log(e)
    let detail=e.detail.value
    let value={val:detail} //必須傳遞引數是物件
    this.triggerEvent('myevent',value)//myevent需要與父元件的事件保持一致
 }

   父元件:      

 <
view>*****我是子元件B*******</view> <childB bind:myevent="onMyEvent"/>
onMyEvent(e){
    console.log(e)
    this.setData({
      paramB:e.detail.val
    })
  },

tips:triggerEvent有三個引數(事件,要傳遞的物件,觸發事件的選項)