微信小程序自定義組件
發(fā)布時間：2021-07-06 08:56 所屬欄目：小程序開發(fā)教程
組件的定義
配置文件- 要編寫一個自定義組件，首先需要在json文件中進行自定義組件聲明（將 component 字段設(shè)為true ）。
- 使用用已注冊的自定義組件前，首先要在頁面的json文件中進行引用聲明。此時需要提供每個自定義組件的標(biāo)簽名和對應(yīng)的自定義組件文件路徑（標(biāo)簽名稱只能是小寫字母、中劃線和下劃線的組合，組件根目錄名不能以“wx-”為前綴）。
//自定義組件component.json
{
"component": true
}
//引用自定義組件的頁面 page.json
{
"usingComponents": {
"component-tag-name": "../component/component"
}
}
|
wxml文件
在組件模板中可以提供一個 <slot> 節(jié)點，用于承載組件引用時提供的子節(jié)點。默認情況下，一個組件的wxml中只能有一個slot。需要使用多slot時，可以在組件js中聲明啟用options: {multipleSlots: true }，以不同的 name 來區(qū)分。
<!-- 這是自定義組件的內(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>
<!-- 以下是對一個自定義組件的引用 (page.wxml)-->
<view>
<text>This is Page</text>
<component-tag-name inner-text="Some text" class="page-component">
<view slot="slot1" class="slot">來自page頁面，通過slot標(biāo)簽</view>
<view slot="slot2"></view>
</component-tag-name>
</view>
|
-
wxss文件
js文件//component.wxss .wapper{ background-color:#ccc; width: 100%; height:auto; } .slot{ color:red; } //page.wxss .page-component{ color:#fff;//有效，繼承樣式 padding:10px;//無效 } .slot{ color:green; } -
//component.js Component({ options: { multipleSlots: true // 在組件定義時的選項中啟用多slot支持 }, properties: { // 這里定義了innerText屬性，屬性值可以在組件使用時指定 innerText: { type: String, value: 'default value', //不存在此屬性時 } }, data: { // 這里是一些組件內(nèi)部數(shù)據(jù) someData: {} }, methods: { // 這里是一個自定義方法 customMethod: function(){} } })
通過上面的代碼和顯示結(jié)果可以看出：
- slot樣式受page.wxss里的.slot影響顯示綠色，不受component.wxss的.slot影響顯示紅色。
- 繼承樣式，如 font 、 color ，會從組件外繼承到組件內(nèi)。除繼承樣式外， app.wxss 中的樣式、組件所在頁面的的樣式對自定義組件無效。例子中.page-component的color:#fff能生效，而padding則不生效。
Page與Component數(shù)據(jù)交互
Tip：page代指引用組件頁面，component代指自定義組件
- page > component
- page在引用組件時能通過屬性值設(shè)置，component.js在properties獲取。
- page在引用組件時通data-xxx設(shè)置，component.js在this.dataset獲取。
<!-- page.wxml --> <component-tag-name fromPage="來自Page" data-other="from dataset"></component-tag-name> |
Component({
properties: {
formPage: String //簡寫
/*
myProperty: { // 屬性名
type: String, // 類型（必填），目前接受的類型包括：String, Number, Boolean, Object, Array, null（表示任意類型）
value: '', // 屬性初始值（可選），如果未指定則會根據(jù)類型選擇一個
observer: function(newVal, oldVal){} // 屬性被改變時執(zhí)行的函數(shù)（可選），也可以寫成在methods段中定義的方法名字符串, 如：'_propertyChange'
}
*/
},
attached:function(){
console.log(this.properties.fromPage);
console.log(this.data.fromPage); //用data也能訪問properties
//設(shè)置properties值用setData()
this.setData({
fromPage: '改變了'
});
console.log(this.properties.fromPage);
//通過dataset獲取data-other的值
console.log(this.dataset.other);
}
})
|
參考文檔：微信小程序-自定義組件
