自定义组件
小程序内置提供了许多组件,同时也允许开发者根据业务需要自定义组件。
小程序自定义组件与页面主要有两点不同:
-
组件对应的 .js 文件中调用 Component 函数
// 调用 Components 函数,由小程序内置提供 Component({ properties: { }, data: { }, methods: { } })
-
组件对应的 .json 文件中,配置 component: true
{ component: true, usingComponents: {} }
应用自定义组件
:
- 自定义组件可以应用到页面中,也可以被其它组件引用。假设首页需要应用自定义的 mynav 组件:
// pages/index/index.json
{
"usingComponents": {
"mynav": "/components/mynav/mynav"
}
}
<!-- pages/test/test.wxml -->
<view>
测试自定义组件
</view>
<!-- 自定义组件的使用 -->
<mynav/>
- 业务逻辑处理
// components/mynav/mynav.js
Component({
// 组件的属性列表
// 通过 properties 为组件定义属性,需要同时指定类型和默认值
properties: {
list: {
// 标签属性值的类型
type: Array,
// 属性没有添加时默认值
value: ['tom', 'jerry', 'spike']
}
},
// 组件的初始数据,通过 data 为组件初始化数据
data: {
start: '[',
end: ']'
},
// 组件的方法列表
// 通过 methods 为组件定义事件回调,这与页面中定义事件回调是不一致的
methods: {
handleTap () {
this.setData({
start: '{',
end: '}'
})
}
}
})
组件间数据交互
自定义组件有自已的作用域,然而在实际开发中,父子组件之间的数据传递是不可避免的。
- 父组件向子组件传递数据,通过自定义组件标签的属性
<!-- pages/index/index.wxml 父组件-->
<view class="box">
<!-- 应用自定义组件 -->
<mynav list="{{navs}}" info='nihao'/>
</view>
// pages/index/index.js
Page({
// 父组件中的数据
data: {
navs: ['首页', '登录', '注册']
}
})
// 子组件
properties: {
list: {
// 标签属性值的类型
type: Array,
// 属性没有添加时默认值
value: ['tom', 'jerry', 'spike']
},
info: {
type: String,
value: 'hello'
}
},
- 子组件向父组件传递数据,自定义事件
<!-- pages/index/index.wxml 子组件-->
<view class="box">
<!-- 应用自定义组件 -->
<mynav list="{{navs}}" bind:receive-msg="handleMsg" />
</view>
// pages/index/index.js 父组件
Page({
// 父组件中的数据
data: {
navs: ['首页', '登录', '注册'],
msg: ''
},
// 自定义事件的回调
handleMsg: function (data) {
console.log('接收子组件传递的数据' + data.detail);
}
})
- 子组件触发父组件自定义事件
// components/mynav/mynav.js 子组件
Component({
// ...
// 组件方法,可用于事件监听回调函数
methods: {
handleTap () {
this.setData({
start: '{',
end: '}'
})
// console.log(this.data.info)
// 向父组件传递数据
this.triggerEvent('receive-msg', 'fruits')
}
}
})