微信小程序组件通信入门及组件生命周期函数

组件生命周期函数链接地址：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> //传递的参数必须以data-xxx开头

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是来自子组件的数据
  }

 

转载于:https://www.cnblogs.com/tlfe/p/11126861.html