# 组件传值 组件中使用 properties 定义可以传入的属性值，在组件调用页面使用属性名即可向子组件传值。 **代码示例：** **组件** *components/com/index.wxml* ```html <view class="wrapper"> <slot name="before"></slot> <view wx:if="{{show}}" wx:for="{{data}}" wx:for-index="index" wx:for-item="item">{{index}} : {{item}} <view>content...</view> </view> <slot name="after"></slot> </view> ``` *components/com/index.js* 在 Components 中加入 `properties` 可以接收由父页面传入的属性值。 ```js Component({ options: { multipleSlots: true // 在组件定义时的选项中启用多slot支持 }, properties: { data: { // 属性名 type: Array, value: [], observer: function(newVal, oldVal){ console.log(newVal, oldVal) } }, show: { type: Boolean, value: true } }, created () { console.log(this.data) console.log(this.show) } }) ``` 其中 - type 类型名，必填，接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型） - value 属性初始值，可选，如果未指定则会根据类型选择一个 - observer 属性被改变时执行的函数，可选，也可以写成在methods段中定义的方法名字符串, 如：'_propertyChange'。接收两个参数，newVal 和 oldVal。 **引用组件的页面** *pages/test/index.wxml* 直接将需要传递的值写到属性中，注意使用 {{}} 进行数据绑定。 ```html <view> <componentTest id="com" data="{{[6,8,9,4]}}" show="{{true}}" > <view slot="before">这里是插入到组件slot name="before"中的内容</view> <view slot="after">这里是插入到组件slot name="after"中的内容</view> </componentTest> </view> ```