## :-: [微信小程序自定義組件](https://www.jianshu.com/p/6c7b597e50c5) ## 使用自定義組件 應用場景: 當我們在設計我們項目的時候會發現在不同的頁面中,有時候會用到相同的功能模塊,此時我們就可以將這些相同的部分提取出來并且單獨設為一個"頁面",然后在要應用到它的地方引用就可以了,以上就是我對自定義組件的個人理解,具體做法請閱讀以下內容. #### 1.創建自定義組件 在上面我介紹了,自定義組件其實就像是一個頁面,所以我們在編寫它的時候也應該像設計頁面一樣,具備`json` `wxml` `wxss` `js`這四個文件. 在這里博主就以編寫案例的形式向大家介紹自定義組件. **一. 前期準備** 1.首先,新建一個名為`wxcomponent`的項目, 2.在pages文件夾下創建一個`components`文件夾用來盛放我們所有的自定義組件. 3.在components文件夾下創建一個`cpt`的文件夾用來盛放`cpt`這個自定義組件,并分別創建好對應的配置文件,如下圖:  component.png **二. 自定義組件聲明** 要在`cpt.json`中進行自定義組件聲明,也就是告訴開發者這是一個組件: ~~~ { "component": true } ~~~ **三. 設計組件結構** 在 wxml 文件中編寫組件模版，在 wxss 文件中加入組件樣式: cpt.wxml文件 ~~~ <!-- 這是自定義組件的內部WXML結構 --> <view class="inner"> {{innerText}} <button bindtap='customMethod'>點擊</button> <slot></slot> </view> ~~~ cpt.wxss文件 ~~~ /* 這里的樣式只應用于這個自定義組件 */ .inner { color: red; } ~~~ 這里的`暫時可以不用管它. 并且自定義組件在設計結構的時候是不應該使用給便簽加上id或者使用屬性選擇器和標簽名選擇器的. 這是因為組件就是被我們那里重用的,而頁面中只能允許有一個id. **四: 注冊組件** 在自定義組件的`js`文件中,需要使用 Component() 來注冊組件，并提供組件的屬性定義、內部數據和自定義方法,如在cpt.js中: ~~~ Component({ properties: { // 這里定義了innerText屬性，屬性值可以在組件使用時指定 innerText: { type: String, value: 'default value', } }, data: { // 這里是一些組件內部數據 someData: 1 }, methods: { // 這里是一個自定義方法 customMethod: function () { console.log('customMethod') } } }) ~~~ **五: 使用自定義組件** 這里我為了簡便一點,就直接用自帶的logs頁面來進行自定義組件的調用吧. 首先,你應該在你要用組件的那個頁面中引用聲明.也就是在`.json`文件. 如在`logs.json`中: ~~~ { "navigationBarTitleText": "查看啟動日志", "usingComponents": { "component-tag-name": "../components/cpt/cpt" } } ~~~ 接下來我們就可以在頁面中像使用其他組件一樣的使用自定義組件了. 比如我在logs.wxml中使用: ~~~ <!--logs.wxml--> <view class="container log-list"> <!-- 以下是對一個自定義組件的引用 --> <component-tag-name inner-text="Some text"></component-tag-name> </view> ~~~ 跳轉到logs頁面如下圖的效果:  result.png **六: 使用slot** 在上面的例子中,在cpt.wxml中寫入了標簽,在引用cpt這個組件時我們要是不在組件的標簽中寫入其他的內容,是不會顯示標簽的 也就是說如果我們把上面logs.wxml改動一下: ~~~ <!--logs.wxml--> <view class="container log-list"> <!-- 以下是對一個自定義組件的引用 --> <component-tag-name inner-text="Some text"> <view>這里是插入到組件slot中的內容</view> </component-tag-name> </view> ~~~ 此時查看logs頁面:  slot.png 并且`<slot></slot>`的位置在哪里也是由你在設計cpt組件時決定的 上面的例子中我是將`slot`放在`button`之下: ~~~ <!-- 這是自定義組件的內部WXML結構 --> <view class="inner"> {{innerText}} <button bindtap='customMethod'>點擊</button> <slot></slot> </view> ~~~ 你也可以將它放在其他位置來達到不同的效果. **七: 使用多個slot** 正常情況下,一個組件中只有一個`slot`,但有時候我們的自定義組件可能不止使用一個`slot`,別怕,我們的微信小程序也是可以允許你這樣的. 需要使用多slot時，可以在組件js中聲明啟用 1.在cpt.json(你自定義組件的json文件)中聲明 ~~~ Component({ options: { multipleSlots: true // 在組件定義時的選項中啟用多slot支持 }, properties: { /* ... */ }, methods: { /* ... */ } }) ~~~ 2.此時，可以在這個組件的wxml中使用多個slot,以不同的 name 來區分: ~~~ <!-- 這是自定義組件的內部WXML結構 --> <view class="inner"> <slot name="header"></slot> <-- 一定要記得使用name屬性 --> {{innerText}} <button bindtap='customMethod'>點擊</button> <slot name="footer"></slot> </view> ~~~ 3.使用時，用 slot 屬性來將節點插入到不同的slot上。 ~~~ <!--logs.wxml--> <view class="container log-list"> <!-- 以下是對一個自定義組件的引用 --> <component-tag-name inner-text="Some text"> <view slot="header">頭部的內容</view> <view slot="footer">底部的內容</view> </component-tag-name> </view> ~~~ ### 后語 微信小程序中自定義組件的用法還有很多,比如組件生命周期,事件等等,更多的內容可以參考[官方文檔](https://link.jianshu.com?t=https://mp.weixin.qq.com/debug/wxadoc/dev/framework/custom-component/). 作者：LinDaiDai\_霖 鏈接：https://www.jianshu.com/p/6c7b597e50c5 來源：簡書 簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權并注明出處。