小程序组件
自定义组件
如何自定义组件
1、在小程序目录下创建一个文件夹,这个文件夹用来存放所有的自定义组件
- components
- com # 创建完com目录之后,右键该目录选择创建component,名字填xxx
- xxx.js
- xxx.json
- xxx.wxml
- xxx.wxss
- pages
- utils
....
2、如同上面的目录结构,每个组件都会有一个文件夹包裹,模拟pages的方式来管理自定义组件。eg:com
目录下管理的4个组件文件
3、想要在页面中使用引用该自定义组件,必须在该页面下的.json
中注册我们自定义组件
{
"usingComponents": {
"com" : "/components/com/com"
}
}
4、在页面的.wxml
中就可以直接使用了
<com></com>
页面向组件传参
1、组件中的.wxml
文件肯定有一个变量来接收页面的传值
<!-- com.wxml -->
<!--name的值是由页面传递过来的-->
<view>{{name}} is my best friend.</view>
2、我们要在组件的js
文件中给这个name变成组件的属性
properties: {
name:{ //属性名
type:String, //属性的类型
value:"egon" // 属性的默认值,如果页面没有给这个name赋值,就使用这个value的值
}
},
3、页面中直接给这个组件的name属性赋值就可以了,相当于传值
<com name = "lxx"></com> //可以是固定值
<com name = "{{name1}}"></com> //这里的可以是变量
组件向页面传递事件
1、组件要绑定一个事件,写法如下
<button bindtap="com_jia" data-num="3">点我加1</button>
2、在组件的.js
文件中
/**
* 组件的方法列表
*/
methods: {
com_jia:function(e){
console.log("con-jia",e)
//把事件抛给页面
this.triggerEvent("jia1",{num:e.currentTarget.dataset.num}) //jia1是组件向页面抛出的事件类型。所以我们在页面重要去捕获这个事件,如果我们要向页面抛事件时候,传参数,例如:{num:e.currentTarget.dataset.num}
}
}
3、在页面的.wxml
文件中捕获组件中传递过来的事件
<com bind:jia1 ="jia"></com>
4、页面的事件的响应函数
jia:function(e){
console.log(e)//组件传过来的参数,在e.detail中
var that = this
that.setData({
num : that.data.num + +(e.detail.num)
})
}