微信小程序 發現之旅（二）—— 自定義組件

組件化的項目開發中，組件應當劃分爲三個層次：組件、模塊、頁面

微信小程序已經爲開發者封裝好了基礎組件，頁面文件（pages）也有了詳細的規定

而模塊就須要自行開發，而且要和頁面文件區分開，這就涉及到自定義組件

 

 

1、基本用法

在根目錄下建立一個 components 目錄，用於存放自定義組件

組件也是由 json、wxml、wxss、js 四個文件組成

其中 wxml 部分沒有什麼特殊的地方，和頁面的寫法一致

wxss 也是隻對組件生效，並且 app.wxss 中的樣式也不會對自定義組件生效

最關鍵的地方在於，須要在 json 中添加配置項：

將 component 字段設爲 true，這樣才能註冊這個自定義組件

 

當須要在頁面中使用自定義組件的時候，在頁面的 json 文件中添加聲明：

{
  "usingComponents": {
    "組件名": "組件路徑"
  }
}

而後就能在頁面的 wxml 中直接使用該組件

 

 

2、參數傳遞  組件與組件之間的參數傳遞比較複雜，留到下一篇博客中細說，這裏只介紹 properties 

小程序的頁面 pages 須要使用 Page() 來註冊，而組件則須要 Component() 構造器

若是組件須要接受一個外部數據，好比一個列表組件的數據源 data，能夠這麼配置：

這裏的 properties 相似於 vue 中的 props，表示該對象下的屬性將從外部傳入

properties 可設置 type、value、observer 三個屬性

其中 type 用於指定字段類型（ Number，String，Array，Object，Function）

value 表示字段的默認值，observer 用於定義該字段的監聽函數

 

在頁面上調用組件的時候，直接給 data 賦值就好：

PS：開發中應當避免使用 data 爲前綴的屬性名（如 data-info），這會被識別爲 dataset 中的參數

 

 

3、組件插槽

小程序的組件也能夠使用 <slot> 來擴展內容

而後父組件引入這個組件的時候，能夠在組件中插入節點，節點內容會渲染到 <slot> 節點的位置

 

組件默認只能有一個 <slot>，若是須要添加多個插槽，首先須要在組件 js 中聲明

Component({
  options: {
    multipleSlots: true // 在組件定義時的選項中啓用多slot支持
  },
  properties: { /* ... */ },
  methods: { /* ... */ }
})

而後須要給 <slot> 命名，以 name 來區分各個插槽

 

 並在引用組件的時候，給節點指定對應的 <slot>

 

 

 

4、Behaviors

在 Vue 的項目中，能夠採用 mixin 來引入一些公共方法或參數，小程序的 behaviors 和 mixin 十分類似

每一個 behavior 一般是一個單獨的 js 文件，由 Behavior() 構造器建立，和 Components() 組件構造器相似，能夠包含一組屬性、數據、生命週期函數和方法

// components/behaviors/wise.js module.exports = Behavior({ behaviors: [], // 能夠引用別的 behaviors properties: { subName: { type: String } }, data: { subInfo: 'so cool you are' }, attached: function () {}, methods: { handleSubmit: function () { console.log('submit') } } })

使用的時候，在組件中引入，而後聲明該 behaviors

而後就能直接在組件中使用 behaviors 中定義的數據了