1.組件wxml的slot-插槽

• 在使用基礎組件時，可以在組件中間寫子節點，從而將子節點內容展示到頁面中，自定義組件也可以接收子節點
• 但是要在組件模板中定義節點，承載組件中間的子節點
• 需要使用多個插槽時，要在組件.js中聲明啟用，同時給slot添加name屬性來區分不同的slot(具名插槽)
• 然后給子節點內容添加slot屬性，屬性值是對應的slot的name名稱，來將內容插入對應的slot中。

label和slot中的內容可以二選一

.js中的代碼

Component({option: {multipleSlot: true},
}

頁面page

<custom01><text slot="slot-top">我要顯示到頂部</text>我是子節點內容<text slot="slot-bottom">我要顯示到底部</text>
</custom01>

components組件

<view><slot name="slot-top" /><!-- slot就是用來接收、承接子節點的內容 --><!-- slot只是一個占位符，子節點內容會將slot進行替換 --><view><slot /></view><slot name="slot-bottom" />
</view>

2.組件樣式及注意事項

自定義組件擁有自己的 wxss 樣式，組件 wxss 文件的樣式，默認只對當前組件生效

編寫組件樣式時，需要注意以下幾點：

1. app.wxss 或頁面的 wxss 中使用了標簽名（view）選擇器（或一些其他特殊選擇器）來直接指定樣式
   這些選擇器會影響到頁面和全部組件，通常情況下這是不推薦的做法
2. 在自定義的wxss文件中，不允許使用標簽、ID、屬性選擇器，只能用class選擇器
3. 組件和引用組件的頁面中使用后代選擇器（.a .b）在一些極端情況下會有非預期的表現，如遇，請避免使用
4. 子元素選擇器（.a>.b）只能用于 view 組件與其子節點之間，用于其他組件可能導致非預期的情況。
5. 繼承樣式，如 font 、 color ，會從組件外繼承到組件內。
6. 除繼承樣式外， 全局中的樣式、組件所在頁面的的樣式對自定義組件無效 (除非更改組件樣式隔離選項)

3.組件樣式隔離

自定義組件的樣式只受自身 wxss 的影響，但是有時候我們需要組件使用者的樣式能夠影響到組件，這時候就需要指定特殊的樣式隔離選項 styleIsolation。

有以下取值：

1. isolated：表示啟用樣式隔離，在自定義組件內外，使用 class 指定的樣式將不會相互影響（一般情況下的默認值）
2. apply-shared：表示頁面 wxss 樣式將影響到自定義組件，但自定義組件 wxss 中指定的樣式不會影響頁面
3. shared：表示頁面 wxss 樣式將影響到自定義組件，自定義組件 wxss 中指定的樣式也會影響頁面和其他設置了 apply-shared 或 shared 的自定義組件。

options: {// isolated開啟樣式隔離，是默認值//apply-shared組件使用者樣式能夠影響到自定義組件本身，反之不行// shared表示組件使用者、頁面的wxss樣式能夠影響到自定義組件，反之也可以styleIsolation: "shared"},

4.小程序修改checkbox樣式

5.數據監聽器-observers

數據監聽器主要用于監聽和響應任何屬性(properties)和數據(data)的變化，數據變化時 就會發生回調函數，方便開發者進行業務邏輯處理。
數據監聽需要使用-observers字段

Component({/*** 組件的屬性列表*/properties: {label: {type: String,value: "測試"}},/*** 組件的初始數據*/data: {num:10,count: 100,obj: { name: 'tom', age: 10 },arr: [1, 2, 3]},// 用來監聽數據以及屬性是否發生了變化observers: {// key：需要監聽的數據// value：回調函數，形參：最新的數據num: function(newNum) {// 對data中數據進行監聽，如果數據沒有發生，監聽器不會執行console.log(newNum)},// 同時監聽多個數據'num, count': function(newNum, newCount) {console.log(newNum, newCount);},// 支持監聽屬性以及內部數據的變化"obj.name": function(newName) {console.log(newName);},"arr[1]": function(newArr) {console.log(newArr);},// 監聽對象中所有屬性變化// 用通配符"obj.**": function(newObj) {console.log(newObj);},// 與data中不同，只要組件使用者傳遞了數據，監聽器中就能獲取數據"label": function(newLabel) {console.log(newLabel);}},/*** 組件的方法列表*/methods: {// 更新數據updateData () {this.setData({num: this.data.num + 1,count: this.data.count - 1,'obj.name': 'jerry','arr[1]': 666,'label': "最新的標題"})}}
})

6.組件通信-父組件傳值

1. 在父組件WXML中使用數據綁定的方式向子組件傳遞動態數據
2. 子組件內部使用properties接收父組件傳遞的數據即可

observers: {// 如過需要properties中的數據賦值給data// 可以使用 observers進行處理checked: function(newChecked) {this.setData({isChecked: newChecked})}}

7.組件通信-子往父傳值

1. 自定義組件內部使用triggerEvent方法發射一個自定義的事件，同時可以攜帶數據
2. 自定義組件標簽通過bind方法監聽發射的事件，同時綁定事件處理函數，在事件處理函數中通過事件對象獲取傳遞的數據

 methods: {// 將數據傳遞給子組件sentData () {// 如果需要將數據傳遞給父組件// 需要用triggerEvent發射自定義事件this.triggerEvent('myevent', this.data.num)}}<!-- 需要在自定義組件標簽上通過bind方法綁定自定義事件，同時綁定事件處理函數 -->
<view>{{ num }}</view>
<custom05 bind:myevent="getData" />data: {num : ''},getData (event) {console.log(event);// 可以通過事件對象.detail獲取子組件傳遞給父組件的數據this.setData({num: event.detail})},<button plain type="primary" bindtap="sentData">傳遞數據</button>

8.獲取組件實例

父組件通過this.selectComponent方法，獲取子組件實例對象，這樣就可以訪問子組件的任意數據和方法
this.selectComponent方法在調用時需要傳入一個匹配選擇器selector

getChild () {const res = this.selectComponent('.child')console.log(res);}

9.組件生命周期

• 組件生命周期:指組件自身的一些鉤子函數，函數在特定的時間節點被觸發
• 函數要在lifetimes字段內進行聲明
• 有5個：created, attached, ready, moved, detached

Component({lifetimes: {// 組件實例被創建好以后執行// 在組件實例剛剛被創建時執行，注意此時不能調用 setDatacreated () {}, // 組件被初始化完畢，模板解析完成，已經把組件掛載到頁面上attached () {// 一般頁面中的交互會在attached鉤子函數中進行this.setData({})}, // 組件被銷毀detached () {},ready () {}, moved () {}}
})

10.組件所在頁面的生命周期

• 組件中還有一些特殊的生命周期，其與組件沒有很強的關聯
• 主要用于組件內部監聽父組件的展示、隱藏狀態、從而方便組件內部執行一些業務邏輯的處理
• 共四個：show, hide, resize, routeDone, 要在pageLifetimes中聲明

pageLifetimes: {// 監聽組件所在頁面展示（后臺切前臺）狀態show () {},// 監聽組件所在頁面隱藏（前臺切后臺，點擊tabbar）狀態hide () {}}