1.在程序中新建文件夹 component，然后 选中文件夹-右键-新建-Conponent
image.png
2.然后就可以在wxml里面进行组件的布局啦
<!--component/nameItem.wxml-->
<view class='mainView'>
<image class='image'></image>
<view class='rightView'>
<text>标题</text>
<text>描述</text>
</view>
</view>
3.引用：在需要用到组件的地方进行引用
❗️在引用的 文件的json里面添加
"usingComponents": {
组件的名字 组件的路径
"nameItem": "../../component/nameItem"
}
❗️在wxml 里面可以使用组件 nameItem
<nameItem />
4.定义属性列表、组件的初始数据、方法
// component/nameItem.js
Component({
/**
* 组件的属性列表，外部可以查看
*/
properties: {
defaultTitle: {
type: String, // String, Number, Boolean, Object, Array, null
value: '默认标题',
observer: function (newVal, oldVal) {
} // 属性被改变时执行的函数（可选）
},
defaultDes: {
type: String,
value: '默认描述'
}
},
/**
* 组件的初始数据，组件内部使用
*/
data: {
info:{},
info1: ''
},
/**
* 组件的方法列表
*/
methods: {
imageTap: function (){
console.log('点击了图片')
},
titleTap: function () {
console.log('点击了标题')
},
desTap: function () {
console.log('点击了描述')
},
}
})
使用
<view class='mainView'>
<image class='image' bindtap='imageTap'></image>
<view class='rightView'>
<text bindtap='titleTap'>{{defaultTitle}}</text>
<text bindtap='desTap'>{{defaultDes}}</text>
</view>
</view>
<nameItem defaultTitle='这就是我的标题' defaultDes='这就是我的描述'/>
<nameItem defaultTitle='这就是我的标题' />
<nameItem defaultDes='这就是我的描述' />
5.点击组件的按钮，触发page里面的方法
- 在组件按钮的点击方法里面使用triggerEvent
自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项
/**
* 组件的方法列表
*/
methods: {
imageTap: function (){
console.log('点击了图片')
// 参数
var myEventDetail = {imageURL: 'imageURL', title: 'title', des: 'des'} // detail对象，提供给事件监听函数
var myEventOption = {} // 触发事件的选项，选项，具体参数可看小程序API
this.triggerEvent('customComponentImageEvent', myEventDetail, myEventOption)
},
titleTap: function () {
console.log('点击了标题')
},
desTap: function () {
console.log('点击了描述')
},
}
2.在page的wxml里面需要绑定需要调用的方法
<nameItem default-Title='这就是我的标题' default-Des='这就是我的描述'
bindcustomComponentImageEvent="customComponentImageEvent"/>
3.在page里面声明方法,传递的参数可在e里面获取
customComponentImageEvent:function(e){
console.log('自定义组件的图片事件:',e)
}
