//自定義組件component.json { "component": true } //引用自定義組件的頁(yè)面 page.json { "usingComponents": { "component-tag-name": "../component/component" } } |
<!-- 這是自定義組件的內(nèi)部WXML結(jié)構(gòu)(component.wxml)--> <view class='wapper'> <text>this is component</text> <slot name="slot1"></slot> 我在中間 <slot name="slot2"></slot> </view> <!-- 以下是對(duì)一個(gè)自定義組件的引用 (page.wxml)--> <view> <text>This is Page</text> <component-tag-name inner-text="Some text" class="page-component"> <view slot="slot1" class="slot">來(lái)自page頁(yè)面,通過(guò)slot標(biāo)簽</view> <view slot="slot2"></view> </component-tag-name> </view> |
//component.wxss .wapper{ background-color:#ccc; width: 100%; height:auto; } .slot{ color:red; } //page.wxss .page-component{ color:#fff;//有效,繼承樣式 padding:10px;//無(wú)效 } .slot{ color:green; } |
//component.js Component({ options: { multipleSlots: true // 在組件定義時(shí)的選項(xiàng)中啟用多slot支持 }, properties: { // 這里定義了innerText屬性,屬性值可以在組件使用時(shí)指定 innerText: { type: String, value: 'default value', //不存在此屬性時(shí) } }, data: { // 這里是一些組件內(nèi)部數(shù)據(jù) someData: {} }, methods: { // 這里是一個(gè)自定義方法 customMethod: function(){} } }) |
通過(guò)上面的代碼和顯示結(jié)果可以看出:
Tip:page代指引用組件頁(yè)面,component代指自定義組件
<!-- page.wxml --> <component-tag-name fromPage="來(lái)自Page" data-other="from dataset"></component-tag-name> |
Component({ properties: { formPage: String //簡(jiǎn)寫 /* myProperty: { // 屬性名 type: String, // 類型(必填),目前接受的類型包括:String, Number, Boolean, Object, Array, null(表示任意類型) value: '', // 屬性初始值(可選),如果未指定則會(huì)根據(jù)類型選擇一個(gè) observer: function(newVal, oldVal){} // 屬性被改變時(shí)執(zhí)行的函數(shù)(可選),也可以寫成在methods段中定義的方法名字符串, 如:'_propertyChange' } */ }, attached:function(){ console.log(this.properties.fromPage); console.log(this.data.fromPage); //用data也能訪問(wèn)properties //設(shè)置properties值用setData() this.setData({ fromPage: '改變了' }); console.log(this.properties.fromPage); //通過(guò)dataset獲取data-other的值 console.log(this.dataset.other); } }) |
參考文檔:微信小程序-自定義組件
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)