摘要：引入組件假如我要在里引入組件想在頁(yè)面中使用組件必須在文件里注冊(cè)組件。組件的屬性列表組件的方法列表組件內(nèi)數(shù)據(jù)傳到外部在這個(gè)組件內(nèi)我定義了這個(gè)方法，每次點(diǎn)擊一級(jí)菜單或二級(jí)菜單的時(shí)候我就用過(guò)方法把的值傳到組件外部以供使用。

如果小程序中有可復(fù)用的UI且具有一定的功能性，就可以使用自定義組件將其封裝起來(lái)。（如果僅僅只需要復(fù)用UI可使用template）

下面介紹父子組件的數(shù)據(jù)傳遞方法，以及一個(gè)簡(jiǎn)單的組件和一個(gè)復(fù)雜的組件示例。

【由于剛開(kāi)始寫(xiě)這篇文章的時(shí)候我還算是一個(gè)小程序的新手，自己看著官方文檔研究并整理歸納的，有很多不足以及錯(cuò)誤的地方。在經(jīng)過(guò)一年的沉淀以后（雖然這一年我主要在寫(xiě)vue而不是小程序），我決定重新整理這篇瀏覽量比較大的文章，以免新手因我的文章走了彎路?！?/p> 二、父子組件傳遞數(shù)據(jù)的方法 1.父組件向子組件傳遞數(shù)據(jù)

parent.wxml

parent.js

data: {
  name: "Peggy",
  age: 25
}

child.js

properties: {
  name: {
    type: String,
    value: "小明"
  },
  age: Number
}

父組件向子組件傳值以屬性的形式，子組件以properties接收，并可指定數(shù)據(jù)類(lèi)型type以及默認(rèn)值value。
在wxml里可直接以{{name}}的形式使用，而在js中以this.properties.name獲取。

child.js

methods: {
  changeName() {
    this.triggerEvent("changeName", {
      name: "李四"
    })
  }
}

parent.wxml

parent.js

changeName(event) {
  console.log(event.detail)

  // { name: "李四" }
}

子組件向父組件傳遞數(shù)據(jù)使用this.triggerEvent方法，這個(gè)方法接受3個(gè)參數(shù)：
this.triggerEvent("myevent", myEventDetail, myEventOption);

myevent為方法名，
myEventDetail是傳到組件外的數(shù)據(jù)，
myEventOption為是否冒泡的選項(xiàng)，有三個(gè)參數(shù)可以設(shè)置：

bubbles    默認(rèn)false 事件是否冒泡
composed 默認(rèn)false 事件是否可以穿越組件邊界
capturePhase 默認(rèn)false 事件是否擁有捕獲階段

在父組件監(jiān)聽(tīng)事件bindchangeName="changeName"，在changeName方法里有一個(gè)event參數(shù)，可以從event.detail里拿到組件內(nèi)部傳出來(lái)的值。

這個(gè)組件常見(jiàn)于外賣(mài)軟件中，用于記錄想要購(gòu)買(mǎi)的商品的數(shù)量。初始化的時(shí)候只有一個(gè)加號(hào)，點(diǎn)擊加號(hào)以后出現(xiàn)數(shù)字和減號(hào)，并最后將數(shù)字傳到組件外供外部使用。

首先在根目錄創(chuàng)建components文件夾（推薦），然后創(chuàng)建num-controller文件夾（我取的組件名字），在這個(gè)文件夾上點(diǎn)擊右鍵新建一個(gè)component，名字為index。

/components/num-controller/index.wxml

  
  {{num}}
  

這段代碼就是加減兩個(gè)按鈕和一個(gè)數(shù)字。

/components/num-controller/index.json

{
  "component": true,
  "usingComponents": {}
}

這個(gè)文件在創(chuàng)建component的時(shí)候會(huì)自動(dòng)寫(xiě)入這段代碼。

/components/num-controller/index.js

Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    nameId: {
      type: String
    },
    num: {
      type: Number,
      value: 0
    },
    int: {
      type: Number,
      value: 1
    },
    min: {
      type: Number,
      value: 0
    }
  },

  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {

  },

  /**
   * 組件的方法列表
   */
  methods: {
    numChange() {
      this.triggerEvent("numChange", {
        num: this.properties.num,
        nameId: this.properties.nameId
      })
    },
    add() {
      this.setData({
        num: this.properties.num + this.properties.int
      })
      this.numChange()
    },
    sub() {
      this.setData({
        num: this.properties.num - this.properties.int
      })
      this.numChange()
    }
  }
})

在組件內(nèi)部我定義了4個(gè)屬性，properties是父組件傳給子組件的屬性。
nameId用來(lái)標(biāo)識(shí)子組件的唯一性，如果在父組件內(nèi)有多個(gè)計(jì)數(shù)器，子組件想把改變的數(shù)據(jù)傳給父組件時(shí)可以用到；
num代表計(jì)數(shù)器中的數(shù)字，默認(rèn)為0；
int代表加減一次改變多少，默認(rèn)為1；
min代表計(jì)數(shù)器的最小值，等于這個(gè)值時(shí)減號(hào)會(huì)消失，默認(rèn)為0。

同時(shí)在子組件內(nèi)定義了兩個(gè)方法：
add點(diǎn)擊加號(hào)觸發(fā)，首先改變子組件內(nèi)部的數(shù)字，同時(shí)觸發(fā)numChange方法將改變的數(shù)字傳到組件外部；
sub點(diǎn)擊減號(hào)觸發(fā)，首先改變子組件內(nèi)部的數(shù)字，同時(shí)觸發(fā)numChange方法將改變的數(shù)字傳到組件外部。

假如我要在index.wxml里引入組件：

index.json

{
  "usingComponents": {
    "num-controller": "/components/num-controller/num-controller"
  }
}

想在頁(yè)面中使用組件必須在json文件里注冊(cè)組件。

index.js

Page({
  data: {
    num1: 0,
    num2: 10,
    num3: 100
  },
  numChange(event) {
    const {num, nameId} = event.detail
    this.setData({
      [nameId]: num
    })
  }
})

data里的num1, num2, num3是從組件外傳入的num，在numChange方法里用event.detail可以拿到組件內(nèi)部通過(guò)this.triggerEvent傳出來(lái)的數(shù)據(jù)，然后根據(jù)業(yè)務(wù)需求做邏輯修改。

這是一個(gè)二級(jí)菜單，點(diǎn)擊左邊（一級(jí)）會(huì)改變右邊（二級(jí)）的展示。

組件內(nèi)部：
/components/filter-panel/index.wxml

  
    
      ...
    

    
      ...
    
  

/components/filter-panel/index.json

{
  "component": true,
  "usingComponents": {}
}

組件外部：
假如我要在index.wxml里引入組件：

index.json

{
  "usingComponents": {
    "filter-panel": "/components/filter-panel/index"
  }
}

這樣就成功引入組件啦~（說(shuō)真的組件化做好了非常舒服，后期會(huì)省很多力氣）

組件外部：

index.wxml

index.js

data: {
  list: [
    ["附近", "地鐵站"],
    [["不限", "1km", "2km", "3km"], ["江漢路", "積玉橋", "洪山廣場(chǎng)", "楚河漢街", "光谷廣場(chǎng)"]]
  ],
  active: [0, 0]
},

組件內(nèi)部：

/components/filter-panel/index.js

Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    list: Array,
    active: Array
  },
  /**
   * 組件的方法列表
   */
  methods: {
    ...
  }
})

如果想從組件外向組件內(nèi)傳遞數(shù)據(jù)，直接在外部引用時(shí)以屬性的方式傳入。
這里我傳入了2個(gè)屬性：
list是二級(jí)選擇面板渲染的數(shù)據(jù)。
active是用戶(hù)選擇的選項(xiàng)數(shù)據(jù)。

到這里組件已經(jīng)可以正常展示了，但是點(diǎn)擊顯示選中項(xiàng)還未實(shí)現(xiàn)。

控制組件active項(xiàng)的是外部的數(shù)據(jù)active: [0, 0]，通過(guò)組件以屬性的形式傳到了內(nèi)部。

/components/filter-panel/index.wxml

  
    
      

        

          {{item}}
        
      
    

    
      

        

          {{item}}
        
      
    
  

/components/filter-panel/index.js

Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    list: Array,
    active: Array
  },
  /**
   * 組件的方法列表
   */
  methods: {
    changeLevel() {
      this.triggerEvent("changeLevel", {
        level1: this.properties.active[0],
        level2: this.properties.active[1]
      })
    },
    changeLevel1(event) {
      const index = event.target.dataset.index
      this.setData({
        active: [index, 0]
      })
      this.changeLevel()
    },
    changeLevel2(event) {
      const level2 = "active[1]"
      const index = event.target.dataset.index
      this.setData({
        [level2]: index
      })
      this.changeLevel()
    }
  }
})

在這個(gè)組件內(nèi)我定義了changeLevel這個(gè)方法，每次點(diǎn)擊一級(jí)菜單或二級(jí)菜單的時(shí)候我就用過(guò)this.triggerEvent方法把a(bǔ)ctive的值傳到組件外部以供使用。

/components/filter-panel/index.js

methods: {
  changeLevel() {
    this.triggerEvent("changeLevel", {
      level1: this.properties.active[0],
      level2: this.properties.active[1]
    })
  },
  changeLevel1(event) {
    const index = event.target.dataset.index
    this.setData({
      active: [index, 0]
    })
    this.changeLevel()
  },
  changeLevel2(event) {
    const level2 = "active[1]"
    const index = event.target.dataset.index
    this.setData({
      [level2]: index
    })
    this.changeLevel()
  }
}

這個(gè)項(xiàng)目里倒是沒(méi)用用到組件間的數(shù)據(jù)傳遞，所以只是組件和外部的傳遞，還算是比較簡(jiǎn)單，但是一定要思考清楚數(shù)據(jù)的變化狀態(tài)。