一、自定義組件簡(jiǎn)述

開發(fā)者可以將頁(yè)面內(nèi)的功能模塊抽象成自定義組件，以便在不同的頁(yè)面中重復(fù)使用;也可以將復(fù)雜的頁(yè)面拆分成多個(gè)低耦合的模塊，有助于代碼維護(hù)。自定義組件在使用時(shí)與基礎(chǔ)組件非常相似。

二、如何創(chuàng)建自定義組件

1、創(chuàng)建一個(gè)放自定義組件集合的文件夾，

2、創(chuàng)建自定義組件的文件夾

3、鼠標(biāo)右鍵自定義組件文件夾新建Component

三、如何引用

1、在頁(yè)面組件的配置文件中注冊(cè)，配置文件為.json的文件

***圖中“my-btn”為組件的名字隨便寫，后面跟的組件的路徑***

1. {   
2.   "usingComponents": {   
3.     "my-btn": "../../components/mybtn/mybtn"   
4.   }   
5. }   

2、在頁(yè)面.wxml文件中使用即可

四、組件的樣式設(shè)置

組件的樣式很簡(jiǎn)單，類比頁(yè)面，在.wxml中寫組件頁(yè)面結(jié)構(gòu)，在.wxss中寫樣式

注意!!!：類名選擇器必須使用class

wxml文件：

1. class="btn"> 我是mybtn組件   

wxss文件：

1.  .btn{     background: red;    }   

五、 組件的數(shù)據(jù)和方法

自定義組件中.js文件，data字段是存放數(shù)組的，methods是寫方法的，可類比vue學(xué)習(xí)，在data中寫入數(shù)據(jù)可在wxml中渲染

1、如何渲染數(shù)據(jù)

.js文件：

1. data: {     
2.     title: "我是按鈕"  
3.  },  

.wxml文件 ：

1. class="btn"> {{title}}    

2、如何綁定數(shù)據(jù)

.wxml文件：

1. class="btn" bindtap="btnClick"> {{title}}    

.js文件：

1. methods: {   
2.  
3.   btnClick() {   
4.  
5.     console.log( "btnClick" );   
6.  
7.   }   
8.  
9. }   

六、組件的對(duì)外開放屬性 -- properties

組件的對(duì)外屬性，用來(lái)接收外界傳遞到組件中的數(shù)據(jù),組件的 properties 和 data 的用法類似，它們都是可讀可寫的，只不過(guò)：

-- data 更傾向于存儲(chǔ)組件的私有數(shù)據(jù)

-- properties 更傾向于存儲(chǔ)外界傳遞到組件中的數(shù)據(jù)

properties屬性不需要在自定義組件內(nèi)部進(jìn)行修改，是通過(guò)組件調(diào)用時(shí)傳遞進(jìn)來(lái)的!!!

語(yǔ)法結(jié)構(gòu) ：

1. 屬性名稱: {   
2.     type：String，NUmber，【null不限制數(shù)據(jù)類型】   
3.     value: ""   
4. }   

組件內(nèi)定義：

1. properties: {   
2.     color: {   
3.       type: String,   
4.       value: "red"//默認(rèn)顏色   
5.    }   
6. }  

組件頁(yè)面中使用：

1. "btnClick" style= "background: {{ color }}">{{title}}    

使用自定義組件傳入對(duì)外開放屬性：

1. "pink">   
2. //此時(shí)button按鈕就會(huì)變成粉色