小程序-组件传参-component-父传子-子传父

刚开始自学小程序，一边学一边总结，加油！
建议，有前段基础，框架基础的人，看，如果没有，you 可能看不太懂！
开始正题！

父传子

先来一段大白话理解一下

1、首先是如何在父组件中引入子组件

父组件中json中是这么写滴

{
  "component": true,                              //设置component为true
  "usingComponents": {
    "componentB": "../child2/child2"         //这个是引入子组件
  }
}

2、第二步是在父组件wxml中使用子组件的模块

                                                 //这个是父组件的内容
   子组件内容：
      
 //这里customAttribute是自定义属性

这样的话父组件的任务就完成了
3、在子组件的js中先定义传过来的类型

Component({

  behaviors: [],

  properties: {
    paramAtoB:String    //声明父组件传过来的类型为string类型
  },
  data: {

  }, // 这里放的是子组件的私有数据，可用于模版渲染

      // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { },
  moved: function () { },
  detached: function () { },

  methods: {

  }

})

4、在父组件中直接使用就好了

父组件中传来的参数：{{customAttribute}}

至此子传父就算是完成了

子传父

个人理解，学过vue的人应该秒秒钟看懂小程序传参---可以说是一个妈生的

我们先从子组件开始
1、子组件wxml中需要一个事件触发一下，先绑定吧

  向A中传入参数     
//customEvent事件名--点击触发

2、子组件js中准备传参

Component({

  behaviors: [],

  properties: {

  },
  data: {

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

  methods: {
    change:function(){
      this.triggerEvent('myevent', { msg:123});   
//这里的this.triggerEvent相当于一个发射器 发射一个事件给父组件                                                             
 //（myevent）第一个参数是自定义事件，{msg:123}第二个参数是要传递的数据
    }
  }

})

3、父组件内如何接受

    
//在父组件的子模板上绑上子模板传过来的事件   （myevent）   
//子组件点击事件后传到父组件，父组件所处理数据的事件onMyEvent

4、事件执行，通过e.detail.msg获取到子传递过来的数据

Component({

  behaviors: [],

  properties: {

  },
  data: {

  }, // 私有数据，可用于模版渲染

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { },
  moved: function () { },
  detached: function () { },

  methods: {
    onMyEvent:function(e){
     
      console.log(e.detail.msg)    \\e.detail.paramBtoA这就是子传父传递过来的数据
    
    }
  }

})

如果有错或者其他分享欢迎留言

借鉴技术分享
借鉴-----菜鸟搬砖记
来源：CSDN
原文：https://blog.csdn.net/hope93/article/details/80803447
版权声明：本文为博主原创文章，转载请附上博文链接！