微信小程序：自定义组件的数据传递
一、前言
如果小程序中有可复用的UI且具有一定的功能性，就可以使用自定义组件将其封装起来。下面介绍一个简单的组件和一个复杂的组件。
二、简单的组件（计数器）
1. 组件功能介绍
这个组件常见于外卖软件中，用于记录想要购买的商品的数量。初始化的时候只有一个加号，点击加号以后出现数字和减号，并最后将数字传到组件外供外部使用。
2. 创建组件
首先在根目录创建components文件夹（或者你喜欢的地方），然后创建num-controller文件夹（我取的组件名字），在这个文件夹上点击右键新建一个component，名字依然叫做num-controller。
num-controller.wxml
<view class="num-controller">
<view class="iconfont icon-jianshao sub-btn" hidden="{{num<1}}" bindtap="sub"></view>
<view class="goods-num" hidden="{{num<1}}">{{num}}</view>
<view class="iconfont icon-zengjia add-btn" bindtap="add"></view>
</view>这段代码就是加减两个按钮和一个数字，因为我使用的是字体图标所以view里什么都没有。
num-controller.json
{
"component": true,
"usingComponents": {}
}这个文件在创建component的时候会自动写入这段代码。
num-controller.js
Component({
/**
* 组件的属性列表
*/
properties: {
num: Number
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
add() {
this.setData({
num: this.data.num + 1
})
this.triggerEvent('numChange', this.data.num);
},
sub() {
if(this.data.num > 0) {
this.setData({
num: this.data.num - 1
})
}
this.triggerEvent('numChange', this.data.num);
}
}
})
组件内部接收一个参数num，类型是Number；
点击加号触发add方法，首先把init状态变为false，然后数字+1，同时触发numChange方法将改变的数字传到组件外部；
点击减号触发sub方法，数字-1，如果数字为0则把init状态变为true，同时触发numChange方法将改变的数字传到组件外部。
将组件数据传到外部的方法为this.triggerEvent('方法名',{要传递的数据})。
3. 引入组件
假如我要在index.wxml里引入组件：
<num-controller num="{{num}}" bindnumChange="numChange"></num-controller>index.json
{
"usingComponents": {
"num-controller": "/components/num-controller/num-controller"
}
}在json文件里注册组件。
index.js
data: {
num: 1
},
numChange(e) {
const numi = e.detail;
}data里的num是从组件外传入的num，在numChange方法里用e.detail可以拿到组件内部通过this.triggerEvent传出来的数据，然后根据业务需求做逻辑修改。
三、复杂的组件（筛选面板）
一个二级菜单，点击左边（一级）会改变右边（二级）的展示。
1. 创建组件并引入
组件内部：
// filter-panel.wxml
<view class="filter-panel">
<view class="panel-container">
<view class="panel-left">
...
</view>
<view class="panel-right">
...
</view>
</view>
</view>// filter-panel.json
{
"component": true
}组件外部：
// index.wxml
<filter-panel></filter-panel>index.json
{
"usingComponents": {
"filter-panel": "/components/filter-panel/filter-panel-component"
}
}这样就成功引入组件啦~（说真的组件化做好了非常舒服，后期会省很多力气）
2.组件与外部的数据传递（重点）
(1) 固定数据渲染
// filter-panel-component.js
Component({
/**
* 组件的属性列表
*/
properties: {
mode: String,
panel: String,
text: Array,
active: Array
},
/**
* 组件的初始数据
*/
data: {
filterActive:[]
},
/**
* 组件的方法列表
*/
methods: {
...
}
})// index.wxml
<filter-panel mode="mode1" panel="panel1" text="{{panel1Text}}" active="{{panel1Active}}"></filter-panel>// index.js
panel1Text: [
{
'location': '附近',
'choice': ['不限', '1km', '2km', '3km']
}, {
'location': '地铁站',
'choice': ['江汉路', '光谷广场', '陶家岭', '六渡桥']
}
],
panel1Active: [0, 0]从组件外向组件内传递数据，直接在外部引入的组件上传。
这里我传入了4个数据，
mode代表筛选面板的模式，虽然这里只写了一种，但是实际上有三种形式，我写在了一个组件里，所以每次引入的时候都要指定mode。
panel代表是第几个面板，虽然模式有三种，但是首页有四个面板，其中有两个的mode是相同的，为了区分每一个面板传入panel。
panel1Text是渲染的数据。
panel1Active是用户选择的数据。
到这里组件已经可以正常展示了，但是点击显示选中项还未实现。
(2) 可变数据渲染
控制组件active项的是外部的数据panel1Active: [0, 0]，通过组件传到了内部，在组件内部：
// filter-panel-component.js
properties: {
mode: String,
panel: String,
text: Array,
active: Array
},
data: {
filterActive:[]
},
attached() {
this.dataInit();
},
/**
* 组件的方法列表
*/
methods: {
dataInit() {
let active = this.properties.active;
this.setData({
filterActive: active
})
},
_chooseMode1Left(e) {
let mode1LeftIndex = e.currentTarget.dataset.index;
let mode1Active = this.data.filterActive;
if (mode1LeftIndex == 0) {
mode1Active.fill(0, 1, 2);
} else {
mode1Active.fill(-1, 1, 2);
}
mode1Active.fill(mode1LeftIndex, 0, 1);
this.setData({
filterActive: mode1Active
})
},
_chooseMode1Right(e) {
let mode1RightIndex = e.currentTarget.dataset.index;
let mode1Active = this.data.filterActive;
mode1Active.fill(mode1RightIndex, 1, 2);
this.setData({
filterActive: mode1Active
})
wx.setStorageSync(this.properties.panel, this.data.filterActive);
this.triggerEvent('closePanel', {});
}
}
dataInit方法指把外部传进来的active数组赋给内部的私有变量filterActive，然后在内部控制点击的active项。
// index.wxml
<view class="filter-panel mode1" wx:if="{{mode == 'mode1'}}">
<view class="panel-container">
<view class="panel-left">
<view class="left-item {{filterActive[0] == idx1?'active':''}}" bindtap="_chooseMode1Left" wx:for="{{text}}" wx:for-index="idx1" data-index="{{idx1}}">{{item.location}}</view>
</view>
<view class="panel-right {{filterActive[0] == idx1?'':'hide'}}" wx:for="{{text}}" wx:for-index="idx1" data-index="{{idx1}}">
<view class="right-item {{filterActive[1] == idx2?'active':''}}" bindtap="_chooseMode1Right" wx:for="{{item.choice}}" wx:for-index="idx2" data-index="{{idx2}}">
<span>{{item}}</span>
<view class="iconfont icon-correct" hidden="{{filterActive[1] != idx2}}"></view>
</view>
</view>
</view>
</view>_chooseMode1Left和_chooseMode1Right是两个私有方法，官方建议是在函数名前面加上下划线以便区分。
在点击右侧的时候触发外部的方法closePanel。
(3) 组件内数据传到外部
triggerEvent方法可以把组件内部的数据传到外面，触发组件外的事件。它接收3个参数：
this.triggerEvent('myevent', myEventDetail, myEventOption);
myEventDetail和myEventOption都是对象，myEventDetail是传到组件外的数据，myEventOption有三个参数可以设置：
bubbles 默认false 事件是否冒泡
composed 默认false 事件是否可以穿越组件边界
capturePhase 默认false 事件是否拥有捕获阶段但是这里我并没有用triggerEvent将数据传出去，因为我这么做了之后发现组件内外的数据开始同步了，这不是我想要的效果。在组件外部有可能点击其他地方隐藏筛选面板，就算用户点击了左侧也不改变上一次保留的数据，所以我用wx.setStorageSync来保存上一次用户确定的数据。如果用户点击其他地方隐藏面板，则从Storage里取出真实的数据渲染。
在组件外部可以这样操作内部的方法：
// index.js
onReady() {
this.panel1 = this.selectComponent("#panel1");
},
showPanel(e) {
this.panel1.dataInit();
},index.wxml
<filter-panel mode="mode1" panel="panel1" text="{{panel1Text}}" active="{{panel1Active}}" bind:closePanel="closePanel" id="panel1"></filter-panel>通过id获取到组件，然后调用组件内的方法。可以在每次显示筛选面板的时候初始化数据。这就是我最后使用的解决办法。
三、总结
这个项目里倒是没用用到组件间的数据传递，所以只是组件和外部的传递，还算是比较简单，但是一定要思考清楚数据的变化状态。
