小程序之自定义组件
1. 自定义组件
小程序允许我们使用自定义组件的方式来构建页面。
是不是用的微信的组件感觉很爽啊,如果不够用怎么办?
1.1. 创建自定义组件
类似于页面,一个自定义组件由
json
wxml
wxss
js
4个文件组成
1.1.1. 声明组件
首先需要在 自定义组件下json
文件中进行自定义组件声明
{
"component": true
}
1.1.2. 编辑组件
同时,还要在 wxml
文件中编写组件模板,在 wxss
文件中加入组件样式
注意:在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。
<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
{{innerText}}
<slot></slot>
</view>
/* 这里的样式只应用于这个自定义组件 */
.inner {
color: red;
}
1.1.3. 注册组件
在自定义组件的 js
文件中,需要使用 Component()
来注册组件,并提供组件的属性定义、内部数据和自定义方法
Component({
properties: {
// 这里定义了innerText属性,属性值可以在组件使用时指定
innerText: {
type: String,
// 如果页面没传值,就用自定义组件默认的值
value: 'default value',
}
},
data: {
// 这里是一些组件内部数据
someData: {}
},
methods: {
// 这里是一个自定义方法
customMethod: function(){}
}
})
1.2. 使用自定义组件
首先要在页面的 json
文件中进行引用声明。还要提供对应的组件名和组件路径
{
// 引用声明
"usingComponents": {
// 要使用的组件的名称 // 组件的路径
"component-tag-name": "/path/to/the/custom/component"
}
}
1.3页面向自定义组件传递数据
# 页面中wxml
<my-con title="{{变量名}}"><my-con/>
# 在组件中
properties: {
title:{
type:String,
// 如果页面没传值,就用自定义组件默认的值
value:"你好"
}
}
1.4组件将事件传给页面
在页面的wxml中:
bind:icre="icre"
第一个icre为组件方法里绑定的事件,第二件icre为页面的事件
页面
<my-com title="{{title}}" bind:icre="icre"></my-com>
页面中js
icre:function(e){
console.log(e)
this.setData({
num:this.data.num+1
})
},
组件中的wxml
<button bind:tap='clickpush'>加我</button>
组件中的js
clickpush:function(e){
console.log(e)
this.triggerEvent("icre",{"index":13},{})
}