一姚糊、組件的創(chuàng)建與引用
1. 創(chuàng)建組件
① 在項(xiàng)目的根目錄中，鼠標(biāo)右鍵哪工，創(chuàng)建 components -> test 文件夾
② 在新建的 components -> test 文件夾上档痪，鼠標(biāo)右鍵，點(diǎn)擊 “新建 Component ”
③ 鍵入組件的名稱之后回車孽鸡，會(huì)自動(dòng)生成組件對(duì)應(yīng)的 4 個(gè)文件，后綴名分別為 .js 坡垫，.json 梭灿， .wxml和 .wxss
注意：為了保證目錄結(jié)構(gòu)的清晰画侣，建議把不同的組件冰悠，存放到單獨(dú)目錄中.
2. 全局引用組件
在 頁面的 .json 配置文件 中引用組件的方式，叫做“局部引用”配乱。
{ usingComponents:{ "自定義組件名"："組件路徑" } }
{
"usingComponents": {
"my-test1": "/components/test/test"
}
}
3. 全局引用組件
在 app.json 全局配置文件 中引用組件的方式溉卓，叫做“全局引用”
{
"usingComponents": {
"my-test2": "/components/test2/test2"
}
4. 組件和頁面的區(qū)別
從表面來看，組件和頁面都是由 .js 搬泥、.json 桑寨、.wxml 和 .wxss 這四個(gè)文件組成的。但是忿檩，組件和頁面的 .js 與.json 文件有明顯的不同：
（1）組件的 .json 文件中需要聲明 "component": true 屬性
（2）組件的 .js 文件中調(diào)用的是 Component() 函數(shù)
① 整個(gè)程序啟動(dòng)調(diào)用的是App()
② 某個(gè)頁面的渲染調(diào)用的是Page()
③ 某個(gè)組件的渲染調(diào)用的是Component()
（3）組件的事件處理函數(shù)需要定義到 methods 節(jié)點(diǎn)中
二尉尾、組件的樣式
1.組件樣式隔離
默認(rèn)情況下，自定義組件的樣式 只對(duì)當(dāng)前組件生效燥透，不會(huì)影響到組件之外的UI 結(jié)構(gòu)沙咏。（其他組件辨图、小程序頁面）
2.組件樣式隔離的注意點(diǎn)
① app.wxss 中的全局樣式對(duì)組件無效
② 只有 class 選擇器 會(huì)有樣式隔離效果，id 選擇器肢藐、屬性選擇器故河、標(biāo)簽選擇器不受樣式隔離的影響。
3.修改組件的樣式隔離選項(xiàng)
們希望在外界能夠控制組件內(nèi)部的樣式吆豹，此時(shí)鱼的，可以通過 styleIsolation 修改組件的樣式隔離選項(xiàng)。
(1) 在組件的.js 文件中新增加如下配置
Component({
options: {
// 默認(rèn)值isolated: 代表啟動(dòng)樣式隔離
// apply-shared: 代表頁面wxss樣式將影響自定義組件
// shared: 代表雙向的影響
styleIsolation: 'isolated'
}
})
(2)或在組件的.json 文件中新增加如下配置
{
"styleIsolation": "isolated"
}
三痘煤、組件的數(shù)據(jù)凑阶、方法和屬性
1.data數(shù)據(jù)
在小程序組件中，用于組件模板渲染的私有數(shù)據(jù)衷快，需要定義到 data 節(jié)點(diǎn)中晌砾。
data: {
n1: 0,
n2: 5,
sum: 0
},
2. methods方法
在小程序組件中，事件處理函數(shù) 和 自定義方法 需要定義到 methods 節(jié)點(diǎn)中烦磁。
methods: {
// 點(diǎn)擊事件的處理函數(shù)
addN1 () {}
// 自定義方法： 建議和事件綁定區(qū)分開： 以 _開頭
_toast () {}
},
3.properties 屬性
在小程序組件中养匈，properties 是組件的對(duì)外屬性，用來 接收外界(父組件)傳遞到組件中的數(shù)據(jù)都伪。
Components({
// 屬性定義
properties: {
// 完整定義 屬性的方式【當(dāng)需要指定屬性默認(rèn)值時(shí)呕乎，建議使用此方式】
max: {
// 屬性值的數(shù)據(jù)類型
type: Number,
// 屬性值的默認(rèn)值
value: 10
},
// 簡化定義 屬性的方式
max: Number
}
})
<my-test1 max="10"></my-test1>
4.data 和 properties 的區(qū)別
① 本質(zhì)上，兩個(gè)屬性指向的是 同一個(gè)對(duì)象陨晶，也就是 data === properties猬仁。
② 習(xí)慣上，用data保存組件的私有數(shù)據(jù)先誉；properties保存父組件傳遞的數(shù)據(jù)湿刽。
③ 本身兩個(gè)屬性都是 可讀寫 的，但properties如果保存了父組件傳遞的數(shù)據(jù)褐耳，就不應(yīng)該直接在子組件內(nèi)修改诈闺。（vue中的單向數(shù)據(jù)流）
5. 修改 properties 的值
由于 data 數(shù)據(jù)和 properties 屬性在 本質(zhì)上沒有任何區(qū)別，因此 properties 屬性的值也可以用于頁面渲染铃芦，或使用 setData 為 properties 中的屬性重新賦值雅镊。
<view>max屬性的值為：{{max}}</view>
Component({
properties: { max: Number},
methods: {
addCount() {
// 使用 setData 修改屬性的值
this.setData({
max: this.properties.max + 1
})
}
}
}
四、數(shù)據(jù)監(jiān)聽器
數(shù)據(jù)監(jiān)聽器用于監(jiān)聽和響應(yīng)任何屬性和數(shù)據(jù)字段的變化刃滓，從而執(zhí)行特定的操作仁烹。
它的作用類似于 vue 中的watch 偵聽器。
1.基本用法
Components({
// observers: 觀察者
observers: {
'字段A咧虎， 字段B': function(字段A的新值卓缰， 字段B的新值) {
// do something
}
}
2.監(jiān)聽對(duì)象屬性的變化
數(shù)據(jù)監(jiān)聽器支持監(jiān)聽對(duì)象中 單個(gè)或多個(gè)屬性 的變化，示例語法如下：
方式1: 普通方式
Components({
// observers: 觀察者
observers: {
'對(duì)象.屬性A， 對(duì)象.屬性B': function(屬性A的新值征唬， 屬性B的新值) {
// 觸發(fā)此偵聽器的 3 種情況：
// 【為屬性A賦值】：使用setData 設(shè)置this.data.對(duì)象.屬性A 時(shí)觸發(fā)
// 【為屬性B賦值】：使用setData 設(shè)置this.data.對(duì)象.屬性B 時(shí)觸發(fā)
// 【為對(duì)象賦值】：使用setData 設(shè)置this.data.對(duì)象 時(shí)觸發(fā)
}
})
方式2: 通配符方式, 監(jiān)聽對(duì)象中所有屬性的變化
observers: {
//監(jiān)聽_rgb對(duì)象的所有屬性的變化
'_rgb.**': function (obj) {
this.setData({
fullColor:`${obj.r}, ${obj.g}, ${obj.b}`
})
}
}
五震叮、純數(shù)據(jù)字段
1. 什么是純數(shù)據(jù)字段
（1）概念：純數(shù)據(jù)字段指的是那些 不用于界面渲染的 data 字段。
（2）應(yīng)用場景：例如有些情況下鳍鸵，某些 data 中的字段既不會(huì)展示在界面上苇瓣，也不會(huì)傳遞給其他組件，僅僅在當(dāng)前組件內(nèi)部使用偿乖。帶有這種特性的 data 字段適合被設(shè)置為純數(shù)據(jù)字段击罪。例如之前控制上拉加載更多的節(jié)流閥isLoading 這種類型的數(shù)據(jù).
（3）使用純數(shù)據(jù)的好處:純數(shù)據(jù)字段有助于提升頁面更新的性能。
因?yàn)樵谛〕绦蛑刑靶剑琩ata 中聲明的數(shù)據(jù)媳禁，會(huì)具備一個(gè)響應(yīng)式的效果，系統(tǒng)的底層會(huì)對(duì)數(shù)據(jù)進(jìn)行值變化的監(jiān)聽画切，如果竣稽，該數(shù)據(jù)只是純數(shù)據(jù)，沒有必要進(jìn)行響應(yīng)式的監(jiān)聽霍弹，因此定義為純數(shù)據(jù)能夠提高頁面的性能.
2. 使用規(guī)則
在 Component 構(gòu)造器的 options 節(jié)點(diǎn)中毫别，指定 pureDataPattern 為一個(gè)正則表達(dá)式，字段名符合這個(gè)正則表達(dá)式的字段將會(huì)被視為純數(shù)據(jù)字段典格。
Component({
options: {
// 指定所有_開頭的數(shù)據(jù)字段為 純數(shù)據(jù)字段
pureDataPattern: /^_/
},
data: {
a: true, // 普通數(shù)據(jù)字段
_b: true // 純數(shù)據(jù)字段
}
})
六岛宦、組件的生命周期
1.小程序組件可用的全部生命周期如下表所示
① 組件實(shí)例剛被創(chuàng)建好的時(shí)候，created 生命周期函數(shù)會(huì)被觸發(fā)
- 此時(shí)調(diào)用 setData 不會(huì)有效果
- 通常在這個(gè)生命周期函數(shù)中耍缴，只應(yīng)該用于給組件的 this 添加一些自定義的屬性字段
② 在組件完全初始化完畢砾肺、進(jìn)入頁面節(jié)點(diǎn)樹后， attached 生命周期函數(shù)會(huì)被觸發(fā)
- 此時(shí)防嗡， this.data 已被初始化完畢变汪。
- 這個(gè)生命周期很有用，絕大多數(shù)初始化的工作可以在這個(gè)時(shí)機(jī)進(jìn)行（例如發(fā)請(qǐng)求獲取初始數(shù)據(jù)）
③ 在組件離開頁面節(jié)點(diǎn)樹后蚁趁， detached 生命周期函數(shù)會(huì)被觸發(fā)
- 退出一個(gè)頁面時(shí)裙盾，會(huì)觸發(fā)頁面內(nèi)每個(gè)自定義組件的 detached 生命周期函數(shù)
- 此時(shí)適合做一些清理性質(zhì)的工作,例如,清除定時(shí)器
④ 代表組件渲染完成的生命周期函數(shù)為ready
- 可以操作頁面
2.lifetimes節(jié)點(diǎn)
在小程序組件中，生命周期函數(shù)可以直接定義在 Component 構(gòu)造器的 第一級(jí)參數(shù) 中荣德，也可以在 lifetimes 字段內(nèi)進(jìn)行聲明（這是推薦的方式闷煤，其優(yōu)先級(jí)最高）
Component({
// 推薦用法
lifetimes: {
attached() {}, // 在組件實(shí)例進(jìn)入頁面節(jié)點(diǎn)樹時(shí)執(zhí)行
detached() {}, // 在組建實(shí)例被從頁面節(jié)點(diǎn)樹移除時(shí)執(zhí)行
}
})
3. 組件所在頁面的生命周期
有時(shí)童芹，自定義組件的行為依賴于頁面狀態(tài)的變化涮瞻，此時(shí)就需要用到組件所在頁面的生命周期。
組件所在頁面的生命周期, 相當(dāng)于在組件中, 監(jiān)聽了組件所在頁面的一些事件假褪。
4.pageLifetimes節(jié)點(diǎn)
組件所在頁面的生命周期函數(shù)署咽，需要定義在 pageLifetimes 節(jié)點(diǎn)中。
Component({
// 組件在頁面的生命周期函數(shù)在該節(jié)點(diǎn)定義
pageLifetimes: {
show () {}, // 頁面被展示
hide () {}, // 頁面被隱藏
resize () {} // 頁面尺寸變化
}
})
七、插槽
1.單個(gè)插槽（vue的匿名插槽）
① 子組件的模板中預(yù)留插槽占位符
<view class="wrapper">
<view>這里是組件的內(nèi)部節(jié)點(diǎn)</view>
<!-- 對(duì)于不確定的內(nèi)容宁否，可以使用<slot> 進(jìn)行占位窒升， 具體內(nèi)容由組件的使用者決定 -->
<slot></slot>
</view>
② 父組件調(diào)用子組件時(shí)，傳入自定義內(nèi)容
<component-tag-name>
<!-- 這部分內(nèi)容將被放置在組件的 <slot>的位置上 -->
<view>這里是插入到組件slot中的內(nèi)容</view>
</component-tag-name>
2. 啟用 多個(gè)插槽(vue的具名插槽）
① 首先慕匠，在 組件的 .js 文件 中饱须，添加如下配置，表示啟用多個(gè)插槽台谊。
Component({
options: {
multipleSolts: true // 在組件定義時(shí)的選項(xiàng)中啟用多 slot支持
},
})
② 在子組件模板匯中蓉媳，預(yù)留 帶有名稱的插槽占位符
<view>
<view>這是一段固定的文本內(nèi)容</view>
<!-- name 為 before 的第一個(gè) 插槽 -->
<slot name="before"></slot>
<!-- name 為 after 的第一個(gè) 插槽 -->
<slot name="after"></slot>
</view>
③ 父組件調(diào)用子組件時(shí)，給標(biāo)簽添加 slot="插槽名"锅铅，指定將該標(biāo)簽渲染到哪個(gè)插槽酪呻。
<component-tag-name>
<!-- 這部分內(nèi)容將被放置在組件的 <slot>的位置上 -->
<view slot="before">這是通過插槽填充的內(nèi)容,name為before</view>
<view slot="after">這是通過插槽填充的內(nèi)容,name為after</view>
</component-tag-name>
八、父子組件傳值
1. 父傳子--自定義屬性
① 父組件內(nèi)調(diào)用子組件時(shí)盐须，給子組件綁定自定義屬性玩荠，屬性值為 data 中的數(shù)據(jù)。
data: {
// 父組件中的data節(jié)點(diǎn)
count: 0
}
// 在父組件的wxml結(jié)構(gòu)中調(diào)用子組件
<my-test3 count="{{count}}"></my-test3>
② 子組件的.js文件中贼邓，用 properties屬性 接收父組件傳遞的數(shù)據(jù)阶冈。
properties: {
count: Number
}
2. 子傳父--自定義事件
① 父組件調(diào)用子組件時(shí)，用 bind :自定義事件名稱="事件處理函數(shù)" 監(jiān)聽自定義事件塑径。
<my-test3 bind:sync="syncCount"></my-test3>
② 事件的處理函數(shù)定義在父組件的.js文件中眼溶，并用 event.detail 接收子組件傳遞的數(shù)據(jù)。
syncCount (event) {
// 父組件通過事件對(duì)象 e 獲取到子組件傳遞的值
console.log(event.detail.value)
}
③ 在子組件的.js文件中晓勇，用 this.triggerEvent("自定義事件名稱"堂飞，要傳遞的值)來觸發(fā)事件。
<button bindtap="addCount">+1</button>
// 子組件中的js代碼
methods: {
addCount() {
// 使用 this.triggerEvent去觸發(fā)父組件的自定義事件
// 并將數(shù)值同步給父組件
this.triggerEvent('sync', {value: this.properties.count})
}
注意： 父子傳值的 單項(xiàng)數(shù)據(jù)流绑咱。
3. 獲取組件實(shí)例（vue的ref）
① 調(diào)用子組件時(shí)绰筛，該子組件添加 id選擇器或類名選擇器
// 父組件的wxml文件中，調(diào)用子組件
<my-test class="cusstomA" id="cA" count="{{count}}" bind:sync="syncCount"
② 在父組件里調(diào)用 this.selectComponent("id或class選擇器") 描融，獲取子組件的實(shí)例對(duì)象铝噩，從而直接訪問子組件的任意數(shù)據(jù)和方法。
// 父組件的.js文件中窿克，獲取子組件實(shí)例
getChild() {
// 切記下面的參數(shù)不能傳遞標(biāo)簽選擇器骏庸，不然返回的是null
// 也可以傳遞ID選擇器
const child = this.selectComponent('.customA')
// 調(diào)用子組件的setData方法，修改count的值年叮，
child.setData({ count: this.data.count + 1 })
}
九具被、behaviors（vue的mixins）
1. 什么是 behaviors
behaviors 是小程序中，用于實(shí)現(xiàn)組件間代碼共享的特性只损，類似于 Vue.js 中的 “mixins”一姿。
2. behaviors 的工作方式
① 每個(gè) behaviors 可以包含一組 屬性七咧、數(shù)據(jù)、生命周期函數(shù)和方法叮叹。組件引用它時(shí)艾栋，它的屬性、數(shù)據(jù)和方法會(huì)被合并到組件中蛉顽。
② 每個(gè)組件可以引用多個(gè) behaviors 蝗砾，behaviors 也可以引用其它 behaviors 。
behaviors 中
3. 創(chuàng)建 behaviors
調(diào)用 Behavior(Object object) 方法 即可創(chuàng)建一個(gè)共享的 behavior 實(shí)例對(duì)象携冤，供所有的組件使用遥诉。
① 在項(xiàng)目根目錄下創(chuàng)建一個(gè)文件夾 behaviors
② 新建js 文件 my-behavior.js
③ 在該文件中書寫以下代碼
// 調(diào)用 Behavior()方法， 創(chuàng)建實(shí)例對(duì)象噪叙，并導(dǎo)出
export default Behavior({
// 屬性節(jié)點(diǎn)
properties: {},
// 私有數(shù)據(jù)節(jié)點(diǎn)
data: {
username: 'zs'
},
// 事件處理函數(shù)和自定義方法節(jié)點(diǎn)
methods: {},
// 其他節(jié)點(diǎn)...
})
4. 導(dǎo)入并調(diào)用混入對(duì)象
在組件.js文件導(dǎo)入混入對(duì)象矮锈，并在Component( )方法中添加 behaviors配置屬性，屬性值是一個(gè)數(shù)組睁蕾，直接寫入 混入對(duì)象名稱苞笨。
// 導(dǎo)入混入對(duì)象
import myBehavior from '../../behaviors/my-behavior'
Component({
// 在組件內(nèi)部 與data節(jié)點(diǎn)平級(jí)的位置定義該屬性，掛載behavior模塊
behaviors:[myBehavior]
}
注意：Behaviors 就僅僅只是做代碼的復(fù)用而已子眶，如果多個(gè)組件導(dǎo)入了同一種Behaviors瀑凝，他們的數(shù)據(jù)是相互獨(dú)立的。
5. behavior 中所有可用的節(jié)點(diǎn)
6. 同名字段的覆蓋問題
盡量不要把混入對(duì)象的變量名臭杰、方法名和組件中的相同粤咪。
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html
