当多个页面需要重复使用某一功能模块时,可将该功能模块抽象成自定义组件,以便在不同的页面中重复使用。
引用自定义组件:
创建自定义组件类似于页面,一个自定义组件由 json wxml wxss js 4个文件组成。
同时也可以在 wxml 文件中编写组件模板,在 wxss 文件中加入组件样式,它们的写法与页面的写法类似。
项目目录结构:
子组件的位置:components/cardItem/cardItem.js的代码如下
Component({
properties: {
// 这里是从父组件传递过来的参数
},
data: {
// 这里是一些组件内部数据
},
methods: {
// 这里是一个自定义方法
customMethod: function(){}
}
})
cardItem.json
{
"component": true
}
父组件引用子组件cardItem
index.json代码
{
"usingComponents": {
"component-tag-name":"../../components/cardItem/cardItem"
}
}
index.wxml代码
<view class="container">
<component-tag-name></component-tag-name>
</view>
编写组件样式时,需要注意以下几点:
#a { } /* 在组件中不能使用
[a] { } /* 在组件中不能使用
button { } /* 在组件中不能使用
.a > .b { } /* 除非 .a 是 view 组件节点,否则不一定会生效
页面与组件之间传值
父组件向子组件传值( properties ),子组件向父组件传值( this.triggerEvent() )
例如:
父页面给子组件传递一个name=“Ali”,子组件给父组件传递一个函数方法onCreateProces,并且带参数1212
代码如下:
通过wxml设置data-[参数名]传递参数,[参数名]只能是小写
父组件.wxml文件
<view >
<children-item
name="Ali"
bind:onCreateProces="onCreateProces"
data-project-id="500"
/>
</view>
父组件.js文件
onCreateProces(event){
let projectId = event.currentTarget.dataset.projectId//500 父组件本身的值
let params = event.detail //1212 子组件传过来的值
}
子组件.wxml文件
<view catchtap="onAddClick">
<text>{{name}}</text>
<image src="../../img/add.png" alt="添加"></image>
</view>
子组件.js文件
Component({
properties: {
name:{
type:String
}
},
methods: {
onAddClick(){
//传值给父组件 事件名 参数值
this.triggerEvent("onCreateProces",1212)
},
}
})