# 組件傳值 組件中使用 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> ```