?課堂學(xué)習(xí)：自定義組件
一、自定義組件
1.需要在目錄里新建一個(gè)文件夾components 在此文件夾內(nèi)放自定義組件的文件?
在components內(nèi)新建文件夾并重命名 右擊此文件夾 選擇新建Component?
之后此文件夾中會(huì)出現(xiàn)四個(gè)同名文件（js json wxml wxss）
2.自定義組件導(dǎo)入
有兩種方法 全局導(dǎo)入和當(dāng)前頁面導(dǎo)入
分別是在全局或者當(dāng)前的json文件中導(dǎo)入
"usingComponents":?{
????"tabMenu":"../../component/tabMenu/tabMenu"
??},
無論是全局還是當(dāng)前頁面 都是在usingComponents下寫入
“自定義組件名字”:"自定義組件的路徑"?
注意 在全局導(dǎo)入時(shí)路徑開頭不要用./? 直接寫文件名即可?
當(dāng)前頁面導(dǎo)入可以支持 ./ 或者 ../
3.組件的引入
在組件的wxml和wxss中寫入內(nèi)容和樣式 在js中寫方法
在使用時(shí) 輸入<tabMenu></tabMenu>（這里的tabMenu即是之前取名的文件）即可把組件的內(nèi)容傳入
4.組件內(nèi)部可以定義數(shù)據(jù) 在js中：
組件的屬性列表 properties:?{ },
properties:?{
????//定義組件需要傳送的屬性
????label:{
??????//類型是字符串
??????type:String,
??????//默認(rèn)值設(shè)置為空
??????value:''
????},
????list:{
??????type:Array
????},
????activeIndex:{
??????//類型是Number
??????type:Number,
??????//默認(rèn)值一般為0
??????value:0
????},
??},
組件的初始數(shù)據(jù) data:{ },
組件的方法 methods:{ },
methods:?{
????//選項(xiàng)點(diǎn)擊事件
????click?(e){
??????//獲取數(shù)據(jù)參數(shù)?index
??????let?{index}?=?wx.$key(e)
??????//更新高亮索引
??????this.setData({
????????activeIndex?:?index
??????})
??????//觸發(fā)一個(gè)自定義事件，將值通過事件對(duì)象的方式回傳出去
??????this.triggerEvent('syncData',index)
????}
??}
5.自定義事件
//觸發(fā)一個(gè)自定義事件，將值通過事件對(duì)象的方式回傳出去
??????//事件名稱syncData?后面?zhèn)鞯氖侵?index
??????this.triggerEvent('syncData',index)
??????//每次點(diǎn)擊這個(gè)click事件后?就會(huì)觸發(fā)這個(gè)自定義事件?
??????//然后又在頁面里?bind:syncData='syncData'?定義了這個(gè)事件?如果觸發(fā)了這個(gè)事件就會(huì)執(zhí)行這個(gè)函數(shù)syncData
??????//通過這個(gè)事件對(duì)象中的detail屬性會(huì)接到觸發(fā)事件時(shí)回傳的值?就是這個(gè)index?如果要回傳很多值?就改成對(duì)象
??????//this.triggerEvent('syncData',{a:index,b:11,c:22})
