微信小程序父组件传参给子组件

微信小程序父组件如何传参给子组件Component

用法

1. 父组件使用可以直接传参或者使用数据绑定向子组件动态传递数据
   组件在父组件内写法：
   <component-tag-name prop-a="{{dataFieldA}}" ></component-tag-name>
2. 子组件的properties属性内定义'propA'属性，给定type值，比如：

 Component({
   properties: {
       propA: {
         type: String
       }
   }
})

3. 然后在子组件js的this.properties.propA.value就可以访问到父组件传进的dataFieldA的值，或者wxml中直接按照data的使用方式，{{ propname}}来使用

说明

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

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

3. 一定不要设置value, 写成空值也不行。如果一开始设置了value，则无法传参，组件内只能访问到设置的值。