微信小程序：自定义组件的数据传递

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、前言

如果小程序中有可复用的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.jsComponent({ /** * 组件的属性列表 */ 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.jspanel1Text: [ { '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.jsonReady() { 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获取到组件，然后调用组件内的方法。可以在每次显示筛选面板的时候初始化数据。这就是我最后使用的解决办法。