微信小程序

#父传子

• 父组件在data定义要穿的值

<!-- 父组件A wxml -->
<view>
  <componentB paramAtoB='{{paramAtoB}}'></componentB>
</view>

//父组件A js
// view/father/father.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    paramAtoB: "我是A向B传值"
  }
})

• 子组件接收后在properties属性内定义’newPower’属性，给定type值，value可以为空 也可以定义比如

<!-- 子组件B  wxml -->
<view class="inner">
  {{paramAtoB}}
</view>


//子组件B  js
Component({
  //B在这里接收与data类似可以直接在wxml上用
  properties: {
    paramAtoB: {
      type: String,//类型
      value: 'default value'//默认值
    }
  },

父组件中传参的属性名字可以任意命名，名称符合js命名标准
子组件中properties与父组件同名的属性定义可以接收到父组件传进的值。如果父组件的属性名带-，需转为小驼峰形式:prop-a ->propA
#微信小程序文档中关于组件的properties的设置如下：

properties: {
   myProperty: { // 属性名
     type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
     value: '', // 属性初始值（可选），如果未指定则会根据类型选择一个
     observer: function(newVal, oldVal, changedPath) {
        // 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 

有时候传的会出现未定义

原因是父组件获取数据需要时间而子组件渲染是瞬秒 所以在渲染的时候加个判断等父组件获取到数据后在渲染就好了

<view wx:if="{{newMusic.length > 0}}">
  <new newPower="{{newMusic}}"></new>
</view>

子传父

• 子组件通过 this.triggerEvent分发事件的方式

}
<!-- 子组件B  wxml -->
<view class="inner">
  <button bindtap='change'>向A中传入参数</button>
</view>
（注意：子组件的方法需要写在methods：{}里面）

//子组件B  js
Component({
  //B在这里接收与data类似可以直接在wxml上用
  properties: {
    paramAtoB: {
      type: String,//类型
      value: 'default value'//默认值
    }
  },
  data: {
    
  },
  methods: {
    //触发change事件向A传值
    change: function () {
      this.triggerEvent('myevent', { paramBtoA: "666传值成功" });
    }
  }
})
//子组件B json


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

• 在父组件接收

<!-- 父组件A wxml -->
<view>
  <componentB  bind:myevent="onMyEvent"></componentB>
  {{ paramBtoA }}
</view>
// view/father/father.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    paramBtoA: ''
  },
  onMyEvent: function (e) {
    //通过事件接收
    this.setData({
      paramBtoA: e.detail.paramBtoA
    })
  }
})
//父组件A json （里面不能有注释）


{
  "navigationBarTitleText": "父子传值",
  "usingComponents": {
    "componentB": "../../components/son/son"
  }
}