微信小程序自定义组件的使用
一、创建组件
首先在根目录创建components文件夹 , 然后创建 prolist 文件夹(组件的名字),在文件夹处点击右键新建一个component,输入index 自动生成文件
<!--components/a/index.wxml-->
<text>components/a/index.wxml</text>
二、引入组件
- 假设在 index.wxml 里引入组件:
// index.wxml
<view>123</view>
<prolist />
- 想在页面中使用组件 需要在 index.json 文件里注册组件
index.json
{
"usingComponents": {
"prolist": "./../../components/prolist/index"
}
}
三、父组件向子组件传递数据
index.wxml
<view>父组件</view>
<prolist prolist="{{prolist}}" />
index.js
data: {
prolist: [
{
name: '张三',
age: '18'
},
{
name: '李四',
age: '20'
}
]
},
prolist.js
/**
* 组件的属性列表
*/
properties: {
prolist: Array
}
prolist.wxml
<!--components/prolist/index.wxml-->
<view wx:for="{{prolist}}" wx:key="index">
<text>{{item.name}}</text>
<text>{{item.age}}</text>
</view>
父组件向子组件传值以属性的形式,子组件以properties接收,并可指定数据类型type以及默认值
在js中以this.properties.prolist获取。
四、子组件向父组件传值
prolist.js
method: {
changData() {
this.triggerEvent('changData', {
data: [
{
name: '李松',
age: 18
},
{
name: '张三',
age: 22
}
]
})
}
}
index.wxml
<prolist bindchangData="changData" />
index.js
changData(event) {
console.log(event.detail)
}
子组件向父组件传递数据使用this.triggerEvent方法,这个方法接受3个参数:
this.triggerEvent(‘event‘, eventDetail, eventOption);
event为方法名,
eventDetail是传到组件外的数据,
eventOption为是否冒泡的选项,有三个参数可以设置:
bubbles 默认false 事件是否冒泡
composed 默认false 事件是否可以穿越组件边界
capturePhase 默认false 事件是否拥有捕获阶段
在父组件监听事件bindchangData="changData",在changeData方法里有一个event参数,可以从event.detail里拿到组件内部传出来的值。