摘要：引入組件假如我要在里引入組件想在頁面中使用組件必須在文件里注冊組件。組件的屬性列表組件的方法列表組件內數據傳到外部在這個組件內我定義了這個方法，每次點擊一級菜單或二級菜單的時候我就用過方法把的值傳到組件外部以供使用。
一、前言
如果小程序中有可復用的UI且具有一定的功能性，就可以使用自定義組件將其封裝起來。（如果僅僅只需要復用UI可使用）
下面介紹父子組件的數據傳遞方法，以及一個簡單的組件和一個復雜的組件示例。
【由于剛開始寫這篇文章的時候我還算是一個小程序的新手，自己看著官方文檔研究并整理歸納的，有很多不足以及錯誤的地方。在經過一年的沉淀以后（雖然這一年我主要在寫vue而不是小程序），我決定重新整理這篇瀏覽量比較大的文章，以免新手因我的文章走了彎路。】
二、父子組件傳遞數據的方法1.父組件向子組件傳遞數據
.wxml
.js
data: {
name: "Peggy",
age: 25
}
child.js
properties: {
name: {
type: String,
value: "小明"
},
age: Number
}
父組件向子組件傳值以屬性的形式，子組件以接收，并可指定數據類型type以及默認值value。
在wxml里可直接以{{name}}的形式使用，而在js中以this..name獲取。
2.子組件向父組件傳值
child.js
methods: {
changeName() {
this.triggerEvent("changeName", {
name: "李四"
})
}
}
.wxml
.js
changeName(event) {
console.log(event.detail)
// { name: "李四" }
}
子組件向父組件傳遞數據使用this.方法，這個方法接受3個參數：
this.("", , );
為方法名，
是傳到組件外的數據，
為是否冒泡的選項微信小程序組件傳值，有三個參數可以設置：
bubbles 默認false 事件是否冒泡 composed 默認false 事件是否可以穿越組件邊界 capturePhase 默認false 事件是否擁有捕獲階段
在父組件監聽事件=""，在方法里有一個event參數，可以從event.里拿到組件內部傳出來的值。
三、簡單的組件（計數器）1. 組件功能介紹
這個組件常見于外賣軟件中，用于記錄想要購買的商品的數量。初始化的時候只有一個加號，點擊加號以后出現數字和減號，并最后將數字傳到組件外供外部使用。
2. 創建組件
首先在根目錄創建文件夾（推薦），然后創建num-文件夾（我取的組件名字），在這個文件夾上點擊右鍵新建一個，名字為index。
//num-/index.wxml
{{num}}
這段代碼就是加減兩個按鈕和一個數字。
//num-/index.json
{
"component": true,
"usingComponents": {}
}
這個文件在創建的時候會自動寫入這段代碼。
//num-/index.js
Component({
/**
* 組件的屬性列表
*/
properties: {
nameId: {
type: String
},
num: {
type: Number,
value: 0
},
int: {
type: Number,
value: 1
},
min: {
type: Number,
value: 0
}
},
/**
* 組件的初始數據
*/
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()
}
}
})
在組件內部我定義了4個屬性，是父組件傳給子組件的屬性。
用來標識子組件的唯一性微信小程序組件傳值，如果在父組件內有多個計數器，子組件想把改變的數據傳給父組件時可以用到；
num代表計數器中的數字，默認為0；
int代表加減一次改變多少，默認為1；
min代表計數器的最小值，等于這個值時減號會消失，默認為0。
同時在子組件內定義了兩個方法：
add點擊加號觸發，首先改變子組件內部的數字，同時觸發方法將改變的數字傳到組件外部；
sub點擊減號觸發，首先改變子組件內部的數字，同時觸發方法將改變的數字傳到組件外部。
3. 引入組件
假如我要在index.wxml里引入組件：
index.json
{
"usingComponents": {
"num-controller": "/components/num-controller/num-controller"
}
}
想在頁面中使用組件必須在json文件里注冊組件。
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，在方法里用event.可以拿到組件內部通過this.傳出來的數據，然后根據業務需求做邏輯修改。
四、復雜的組件（篩選面板）
這是一個二級菜單，點擊左邊（一級）會改變右邊（二級）的展示。
1. 創建組件并引入
組件內部：
//-panel/index.wxml
... ...
//-panel/index.json
{
"component": true,
"usingComponents": {}
}
組件外部：
假如我要在index.wxml里引入組件：
index.json
{
"usingComponents": {
"filter-panel": "/components/filter-panel/index"
}
}
這樣就成功引入組件啦~（說真的組件化做好了非常舒服，后期會省很多力氣）
2.組件與外部的數據傳遞(1) 固定數據渲染
組件外部：
index.wxml
index.js
data: {
list: [
["附近", "地鐵站"],
[["不限", "1km", "2km", "3km"], ["江漢路", "積玉橋", "洪山廣場", "楚河漢街", "光谷廣場"]]
],
active: [0, 0]
},
組件內部：
//-panel/index.js
Component({
/**
* 組件的屬性列表
*/
properties: {
list: Array,
active: Array
},
/**
* 組件的方法列表
*/
methods: {
...
}
})
如果想從組件外向組件內傳遞數據，直接在外部引用時以屬性的方式傳入。
這里我傳入了2個屬性：
list是二級選擇面板渲染的數據。
是用戶選擇的選項數據。
到這里組件已經可以正常展示了，但是點擊顯示選中項還未實現。
(2) 可變數據渲染
控制組件項的是外部的數據: [0, 0]，通過組件以屬性的形式傳到了內部。
//-panel/index.wxml
- {{item}}
- {{item}}
//-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()
}
}
})
(3) 組件內數據傳到外部
在這個組件內我定義了這個方法，每次點擊一級菜單或二級菜單的時候我就用過this.方法把的值傳到組件外部以供使用。
//-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()
}
}
五、總結
這個項目里倒是沒用用到組件間的數據傳遞，所以只是組件和外部的傳遞，還算是比較簡單，但是一定要思考清楚數據的變化狀態。