微信小程序父传子，子传父组建通信详解

刚开始接触微信小程序，给大家详细讲解一下父子通信，如果有更好的意见请大家私信我，大家一起在这枯燥的生活中探讨代码😉，好话不多说，进入正题

父传子：

在你的父文件夹下的.json文件下引入子组件
代码：

{
  "usingComponents": {
    "music": "../../component/music/music" 
/*这是定义的组件名字*/   /*这是我子组件的路径*/
  }
}

然后在父组件里 以标签的形式写入子组件，传值的话在标签上自定义属性名，属性值要以双花括号保住

<music list='{{list}}'></music>

然后在子组件中使用Component构造器，他在Page外面使用

Component构造器可用于定义组件，调用Component构造器时可以指定组件的属性、数据、方法等。

Component里的参数

在Component的properties中接收父组件传过来的数据

Component({ 
  properties: {
    list: {            // 属性名
      type: Object,     // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: '标题'     // 属性初始值（可选），如果未指定则会根据类型选择一个
    }
  }
})

这样子组件就能接受的父组件传过来的值了在子组件的wxml中用双花括号引用就ok了

 <text>{{list.title}}</text>     

这里我的子组件中的方法都写在了Component构造器中，用methods包裹住

 methods: {
//这里只是个例子，大家不用在意
   switch(res) {
      if (res.statusCode !== 200) {
        this.setData({
          hidden: true
        })
      }
    }
}

子传父：

子传父运用了triggerEvent()

 this.triggerEvent("up",res)  //第一个是自定义事件名，第二个是要传递的值（可以为空）

自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项。

    <music
         id='music'
         list='{{list}}'
         bind:up="_up" 
            >
    </music>

在父组件中的js文件里获取子组件传过来的值,这里的自定义方法要写在Component构造器中的methods里，因为我写在Page中他不会被触发，所以我就试了下他会在Component中被触发

  methods: {
    _up(e) { //e为子组件传过来的值
      console.log(e.detail.data)
      this.setData({
        list: e.detail.data //这里是改变Page中data上的值
      })
    }
  }

好了组件通信到此完毕，请大家多多关照