我們在往常用vue或者是react編程的時候，最常用最常見的一個詞就是組件距潘，在小程序開發(fā)中蜓氨，組件也是很nice的，畢竟誰也不想把1+1 = 2每一個頁面寫一遍突倍。本篇文章適合知道小程序基本開發(fā)的手足腔稀，總結一些自己在開發(fā)小程序組件的過程需要注意的點盆昙，有寫的不對的地方還請指指教。
1. 基本配置
新建組件就跟新建頁面一樣焊虏，還是js淡喜、json、wxml诵闭、wxss四個文件炼团，這里需要注意的有四點。
一疏尿、或許很多人在新建組件的時候瘟芝，會右鍵直接新建page，這樣就會在app.json的配置文件中的pages下面褥琐，根據(jù)路徑多加一項锌俱，需要注意的是，這一項不像是頁面敌呈，刪掉也沒關系贸宏。
二、新建組件之后
? ? ? ?需要在組件的配置文件json中添加component: true字段磕洪；
? ? ? ?需要在引用組件的配置文件中添加usingComponents字段來定義組件的名字和路徑【可以直接用/+app.json中自動生成的吭练，以免路徑找不到】
三、新建的組件析显，如果是直接一鍵生成的鲫咽，那么這個時候js文件中的還是page({...生命周期等執(zhí)行函數(shù)})，所以這個時候需要我們把這些換成組件需要的component({...組件需要的對象})
2.組件樣式
關于樣式叫榕，就是我們的css了浑侥，至于里面的slot姊舵，無非就是一個插槽晰绎，而模版文件中數(shù)據(jù)綁定等我們都可以按照頁面中的來實現(xiàn)，需要注意的是選擇器和樣式污染問題
一括丁、選擇器
在編寫組件的時候荞下，不能使用id選擇器(#a)、屬性選擇器（[a]）和標簽名選擇器史飞，建議統(tǒng)一使用class
子選擇器只能用于view組件尖昏，和其子節(jié)點之間，其余的不建議使用 比如text > text
繼承樣式的話 font還有color這種樣式繼承构资，會從組件外繼承到組件內(nèi)部
除繼承樣式之外抽诉，app.wxss中的樣式，組件所在頁面的樣式對組件內(nèi)部是無效的
其實呢吐绵，我們只用class選擇器就好了迹淌。河绽。。
二唉窃、外部樣式定義
組件定義好了之后耙饰，在使用的時候，如果我忽然在調(diào)用頁面加一個class控制樣式纹份，想加一個class怎么辦呢苟跪？
在組件內(nèi)部的js文件中配置externalClasses：['xxx']，這樣在外部引用的時候蔓涧，可以直接使用這里定義的件已，畢竟單節(jié)點上面，同一節(jié)點同時使用普通樣式和外部樣式的時候蠢笋，優(yōu)先級會出現(xiàn)錯亂拨齐，所以這能很好的避免這種情況
我們前面說了，自定義組件內(nèi)部樣式昨寞，是不會受到外部樣式的影響的瞻惋，除非是全局的標簽或者是options配置中添加assGlobalClass字段
3.component構造器
其實這里的構造器都是制定組件重的屬性、數(shù)據(jù)援岩、方法等等歼狼，定義的字段可以參考官方文檔，我這里不多做累述享怀，把容易混淆的點拿出來對比一下羽峰。
properties: 組件的對外屬性
data: 組件的內(nèi)部數(shù)據(jù)
組件生命周期：生命周期有優(yōu)先級，一般情況下直接當作普通方法添瓷，但是如果需要優(yōu)先級的時候梅屉，可以寫到lifetimes對象里面
4.組件事件
組件的事件，我們和vue差不多的寫法鳞贷，會有一個methods統(tǒng)一來管理坯汤。但是我們通常有兩種類型
1. 組件內(nèi)部調(diào)用的方法。
? ? 和普通一樣就好了搀愧，無非就是完全在組件內(nèi)部自己玩惰聂，不和外部頁面進行數(shù)據(jù)通信，請求也是自己完成
2. 和父組件或者頁面有數(shù)據(jù)通信的方法咱筛。
? ? 我們在vue中需要使用到自組件向父組件傳遞消息搓幌，有一種方法就是this.$emit('...', msg)
? ? 但是我們在小程序中也需要這種場景 【監(jiān)聽事件】：組件間通信的主要方式之一
組件內(nèi)部
```
????????<view bindtap="onHandle"></view>
????????methods: {
onHandle() {
.....
this.triggerEvent('eventName', detailMsg)
}
}
```
頁面或者組件調(diào)用該組件的時候調(diào)用定義好的方法
```
<my-component bind:eventName="handleComponent"></my-component>
```
