小程序自定義組件

一、自定義組件的步驟

1. 需要在json文件中進行自定義組件聲明(將component字段設置為true)可以將這組文件設置為自定義組件
2. 在wxml中編寫屬於我們組件自己的模板
3. 在wxss中編寫相關組件的樣式
4. 在js文件中，可以定義數據或組件內部的相關邏輯

注：WXML節點標簽名只能是 小寫字母、中划線、下划線組合。所以自定義組件標簽名只能是這些。不能以”wx-“為前綴。在app.json的usingComponents聲明某個組件，就是全局注冊，那么所有頁面和組件都可以直接使用該組件

二、自定義組件的樣式細節

1. 自定義組件的樣式不會干擾引用組件的page的樣式
2. 組件內不能使用id選擇器、屬性選擇器、標簽選擇器
3. 外部使用class的樣式只對外部wxml的class生效，對組件不生效
4. 外部使用了id選擇器、屬性選擇器不會對組件內產生影響
5. 外部使用了標簽選擇器，會對組件內產生影響
6. 組件內的class和組件外的class是有隔離的，官方不推薦使用屬性、id、標簽選擇器

三、向組件傳遞數據和樣式

1.給組件傳遞數據：

在組件的js文件中使用properties屬性，有兩種定義方式，一種是變量名后面加類型；一種是變量名里面詳細參數

在組件中通過{{title}}進行接收，在使用組件的地方通過變量名進行傳值。

2.給組件傳遞樣式：

在組件的js文件中使用externalClasses屬性，在組件內的wxml中使用externalClass屬性中的class，在頁面中傳入對應的class，並且給這個class設置樣式

四、組件向外傳遞事件

1.在組件中綁定事件 2.在組件的js中將監聽事件發射出去 3.page中接收到事件，執行對應的方法 4.在page的js中定義相關的處理方法

頁面直接調用組件方法(this.selectComponent)

五、Component構造器

1. properties：定義傳入的屬性

       properties:{
         title:String,
         content:{
           type:String,
           value:""
         }
       }
   

2. data：定義內部屬性

       data:{
         currentIndex:0,
         info:{
           name:"haha",
           age:18
         }
       }
   

3. methods：定義方法

       methods:{
         onBtnClick(){
           this.setData({
             "info.name":"kobe"
           })
         }
       }
   

4. options：額外配置選項

       options:{
         styleIsolation:"shared",
         multipleSlots:true
       }
   

5. externalClasses：引用外部樣式

       externnalClasses:['title'],
   

6. observers：屬性和數據監聽

       observers:{
         title:function(newVal){
           console.log(newVal)
         }
       }
   

7. pageLifetimes：頁面生命周期

       pageLifetimes:{
         show(){
           console.log("頁面顯示出來")
         }
         ...
       }
   

8. lefetimes：組件生命周期

       lifeimes:{
         created(){
           console.log("組件被創建")
         }
         ...
       }