小程序中自定義組件：在pages右擊先新建一個文件夾然后文件夾右鍵創建component
要編寫一個自定義組件，首先需要在 JSON 文件中進行自定義組件聲明，即將 component 字段設為 true 則這一組文件設為自定義組件：
創建的自定義組件與pages/cnode(自己創建的項目文件夾名稱)/cnode(自己創建的項目文件夾中的文件名稱)之間的傳值：
如：實現下圖功能：切換頂部導航時根據點擊的下標和請求數據地址來切換導航效果和文本的不同的數據請求：
這就需要用到小程序中的-->組件間通信與事件：
自定義組件觸發事件時，需要使用 triggerEvent 方法，指定事件名、detail對象和事件選項：
在自定義組件一方定義triggerEvent ，注意：myEventDetail自定義名要帶上Detail，否則數據傳遞不過去。
然后再創建的項目wxml文件標簽中引用：
最后在創建的項目js文件中用事件將傳遞的數據調用出來：
之后，便可以在自定義組件中引用了。
總體結論就是：
一、 創建組件
1 在pages目錄上鼠標右鍵建一個自己的組件文件夾
2 在自己的組件文件夾上鼠標右鍵選擇新建component 輸入組件名稱 可以快速生成組建文件結構
3 要確認在生成的文件的json文件中 component: true
4 在wxml 里面寫自己的組件模板（用小程序原有的組建（dom）寫的一個文檔結構）
5 在wxss中 寫對應的模板樣式
6 在js中寫對應的邏輯
7 例如下方的模板
wxml：
<view class="bar-box">
<text wx:for="{{tabbarArr}}" wx:key="index" bindtap="clickEve" data-tab="{{item.tab}}" data-index="{{index}}" class="{{activeIndex === index ? 'active' : ''}}">{{item.name}}</text>
</view>
二、 組建的引用
1 要在要使用組件的page頁面中的json文件中引入對應的組件
2 例如要引入上方的模板
3 在json文件中
javascript：
"usingComponents": {
"my-tabbar": "../tabbar/tabbar"
}
4 屬性名為要在組件中使用的dom關鍵字
5 例如
wxml：
<my-tabbar tabbarArr="{{tabbarArr}}" activeIndex="{{activeIndex}}" bind:myevent="func"></my-tabbar>
三 屬性的值是要引入的模板文件的文件地址
三 引用文件中向組件中傳值
1 第一步 綁定值
2 在使用的關鍵字dom 后面 自定義屬性 屬性的值是要傳遞的數據變量
3 例如
wxml：
<my-tabbar tabbarArr="{{tabbarArr}}" activeIndex="{{activeIndex}}"></my-tabbar>
4 tabbarArr 和 activeIndex 就是我們的自定義屬性 后面的值是 data中的數據變量
5 第二步 接收值
6 在組件中的properties: {自定義的屬性名: 數據類型} 也可以 properties: {自定義的屬性名: {type: 數據類型，value: '默認值'}}
四 從組件中向引入組件的文件中傳值 要通過自定義事件
1 例如
wxml：
<view class="bar-box">
<text bindtap="clickEve">{{item.name}}</text>
</view>
2 在js的methods中寫入函數
javascript：
clickEve(e) {
// console.log(e)
var myEventDetail = {
tab: '',
index: ''
}
var myEventOption = {}
this.triggerEvent('myevent', myEventDetail, myEventOption) --> 第一個值是一個字符串 也就是自定義的事件名稱 第二個參數是要傳遞的數據
第三個參數定義事件是否能夠冒泡或者捕獲
}
3 在引入的文件中接收的方法
wxml：
<my-tabbar bind:myevent="func"></my-tabbar>
```
4在js文件中
javascript
func (e) {
console.log(e) ---> e本身是事件對象
console.log(e.detail.tab) ---> 在事件對象中可以通過detail找到組件中通過事件傳遞過來的數據 如果在自定義事件中的函數中需要調用其他函數或者方法那么可以直接使用 this.函數或方法名（） }