微信小程序組件通信入門及組件生命周期函數

組件生命周期函數鏈接地址：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html

微信小程序中使用方法傳遞參數

錯誤寫法：

<view bindtap='btn_button(index)> 父級  </view>

正確寫法

<view bindtap='btn_button' data-str="參數"> 父級  </view>

1、暴露組件，在組件xxx.json里

{
  "component": true,
  "usingComponents": {}
}

2、在父級注冊組件，在xxx.json里

{
  "usingComponents": {
    "sron":"/components/sron/sron"
  }
}

3、父組件向子組件傳遞參數

<sron mes="{{transmit}}"></sron> //transmit是來自data里面的數據

4、子組件接收參數

Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    mes:{
      type:String,
      value:''
    }
  },
  /**
   *  在組件實例進入頁面節點樹時執行
   */
  attached(){
    console.log(this.properties.mes)
  }
})

注意：此處兩個參數要相同

1）在小程序中改變data中的狀態使用 this.setData

data:{
    curAdProp:{},
  },
  methods: {
    dataInit(){
      this.setData({
        'curAdProp': "我要改變data里面curAdProp的數據"
      });
    }
}

5、子組件向父組件傳值（通過 triggerEvent 方法）

<text bindtap='btn_sron'>我是子組件</text>

//是組件---->方法需要寫到methods函數里面
methods:{
    btn_sron(){
      this.triggerEvent("btn_box","我是傳遞給父級的數據")//btn_box是將要在父級觸發的事件
    }
  }

--------------------------父級中-----------------------------

 

<sron bind:btn_box='btn_sron'></sron> //btn_sron是btn_box事件要觸發的方法

 

//非組件----》方法不用寫在methods函數里面
btn_sron(e){
    console.log("來自子組件的數據",e.detail)//e.detail是來自子組件的數據
  }