一、前言
如果小程序中有可复用的UI且具有一定的功能性，就可以使用自定义组件将其封装起来。(如果仅仅只需要复用UI可使用template)
下面介绍父子组件的数据传递方法，以及一个简单的组件和一个复杂的组件示例。
【由于刚开始写这篇文章的时候我还算是一个小程序的新手，自己看着官方文档研究并整理归纳的，有很多不足以及错误的地方。在经过一年的沉淀以后(虽然这一年我主要在写vue而不是小程序)，我决定重新整理这篇浏览量比较大的文章，以免新手因我的文章走了弯路。】
二、父子组件传递数据的方法
1.父组件向子组件传递数据
parent.wxml
parent.js
data: {
name: 'Peggy',
age: 25
}
child.js
properties: {
name: {
type: String,
value: '小明'
},
age: Number
}
父组件向子组件传值以属性的形式，子组件以properties接收，并可指定数据类型type以及默认值value。
在wxml里可直接以{{name}}的形式使用，而在js中以this.properties.name获取。
2.子组件向父组件传值
child.js
methods: {
changeName() {
this.triggerEvent('changeName', {
name: '李四'
})
}
}
parent.wxml
parent.js
changeName(event) {
console.log(event.detail)
// { name: '李四' }
}
子组件向父组件传递数据使用this.triggerEvent方法，这个方法接受3个参数：
this.triggerEvent('myevent', myEventDetail, myEventOption);
myevent为方法名，
myEventDetail是传到组件外的数据，
myEventOption为是否冒泡的选项，有三个参数可以设置：
bubbles 默认false 事件是否冒泡
composed 默认false 事件是否可以穿越组件边界
capturePhase 默认false 事件是否拥有捕获阶段
在父组件监听事件bindchangeName="changeName"，在changeName方法里有一个event参数，可以从event.detail里拿到组件内部传出来的值。
三、简单的组件(计数器)
1. 组件功能介绍
这个组件常见于外卖软件中，用于记录想要购买的商品的数量。初始化的时候只有一个加号，点击加号以后出现数字和减号，并最后将数字传到组件外供外部使用。
2. 创建组件
首先在根目录创建components文件夹(推荐)，然后创建num-controller文件夹(我取的组件名字)，在这个文件夹上点击右键新建一个component，名字为index。
/components/num-controller/index.wxml
{{num}}
这段代码就是加减两个按钮和一个数字。
/components/num-controller/index.json
{
"component": true,
"usingComponents": {}
}
这个文件在创建component的时候会自动写入这段代码。
/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
}
},
/**
* 组件的初始数据
*/
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个属性，properties是父组件传给子组件的属性。
nameId用来标识子组件的唯一性，如果在父组件内有多个计数器，子组件想把改变的数据传给父组件时可以用到；
num代表计数器中的数字，默认为0；
int代表加减一次改变多少，默认为1；
min代表计数器的最小值，等于这个值时减号会消失，默认为0。
同时在子组件内定义了两个方法：
add点击加号触发，首先改变子组件内部的数字，同时触发numChange方法将改变的数字传到组件外部；
sub点击减号触发，首先改变子组件内部的数字，同时触发numChange方法将改变的数字传到组件外部。
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，在numChange方法里用event.detail可以拿到组件内部通过this.triggerEvent传出来的数据，然后根据业务需求做逻辑修改。
四、复杂的组件(筛选面板)
这是一个二级菜单，点击左边(一级)会改变右边(二级)的展示。
1. 创建组件并引入
组件内部：
/components/filter-panel/index.wxml
...
...
/components/filter-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]
},
组件内部：
/components/filter-panel/index.js
Component({
/**
* 组件的属性列表
*/
properties: {
list: Array,
active: Array
},
/**
* 组件的方法列表
*/
methods: {
...
}
})
如果想从组件外向组件内传递数据，直接在外部引用时以属性的方式传入。
这里我传入了2个属性：
list是二级选择面板渲染的数据。
active是用户选择的选项数据。
到这里组件已经可以正常展示了，但是点击显示选中项还未实现。
(2) 可变数据渲染
控制组件active项的是外部的数据active: [0, 0]，通过组件以属性的形式传到了内部。
/components/filter-panel/index.wxml
class="{{active[0] == index? 'active': ''}}"
wx:for="{{list[0]}}"
wx:key="{{index}}"
wx:index="index"
data-index="{{index}}"
bindtap="changeLevel1"
>
{{item}}
class="{{active[1] == index? 'active': ''}}"
wx:for="{{list[1][active[0]]}}"
wx:key="{{index}}"
wx:index="index"
data-index="{{index}}"
bindtap="changeLevel2"
>
{{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()
}
}
})
(3) 组件内数据传到外部
在这个组件内我定义了changeLevel这个方法，每次点击一级菜单或二级菜单的时候我就用过this.triggerEvent方法把active的值传到组件外部以供使用。
/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()
}
}
五、总结
这个项目里倒是没用用到组件间的数据传递，所以只是组件和外部的传递，还算是比较简单，但是一定要思考清楚数据的变化状态。
本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户参考了本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:https://www.dengtar.com/24326.html
扫一扫
1475
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
