1.自定义组件的创建
组件定义:
{
"component": true
}
注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。
页面使用：
{
"usingComponents": {
"zcw-bar":"/components/zcw-bar/zcw-bar"
}
}
<!-- 以下是对一个自定义组件的引用，两种方式都可以 -->
<zcw-bar></lzcw-bar>
<zcw-bar/>
2.页面向组件传递数据和样式
2-1.数据绑定
properties属性用于页面给自定义组件传递数据。
组件定义：
Component({
properties: {
//barInfo:Object
barInfo:{
type:Object,
value:null,
// 监听数据改变
observer:function(newValue,oldValue){
console.log('监听数据改变',newValue,oldValue);
}
}
}
})
<view>{{barInfo}}</view>
页面使用：
<zcw-bar barInfo="{{barInfo}}"/>
2-2.样式传递
通过externalClasses属性进行样式传递。
组件定义：
Component({
externalClasses:['barclass']
})
<view class='barclass'></view>
页面使用：
<zcw-bar barclass="color"/>
.color{
color:red;
}
3.页面响应组件的事件
组件定义：
<view bindtap="bindSearch"/>
Component({
methods: {
bindSearch:function(){
// 第一个参数：事件名称
// 第二个参数：要传递的数据
// 第三个参数：触发事件的选项，bubbles，composed，capturePhase
this.triggerEvent("search",{name:"Zcw",age:18},{});
}
}
})
页面使用：
<zcw-bar bindsearch="bindSearch"/>
Page({
bindSearch: function(event) {
console.log("点击搜索按钮"，event);
}
})
通过event中的detail就可以得到数据，打印结果如下：
detail数据.png
4.获取组件对象
- 父组件还可以通过 this.selectComponent 方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法。
5.slot -- 插槽
5-1.单插槽
组件定义：
<view>
<slot/>
</view>
页面使用：
<zcw-bar>
<view>我会替换组件的slot</view>
</zcw-bar>
5-2.多插槽
组件定义：
<view>
<!-- 使用name区分不同slot-->
<slot name = "slot1"/>
<slot name = "slot2"/>
</view>
Component({
options:{
// 在组件定义时的选项中启用多slot支持。
multipleSlots:true
}
})
<zcw-bar>
<!-- 使用 slot属性 指定替换哪个slot标签 -->
<view slot="slot1">我会替换组件的slot1</view>
<view slot="slot2">我会替换组件的slot2</view>
</zcw-bar>
6.Component属性
- properties：定义传入的属性。
- data：定义内部的属性。
- methods：组件的方法，包括事件响应函数和任意的自定义方法，以及页面的生命周期方法（即 on 开头的方法，只有当Component定义的是页面才有效）
- options：额外配置选项。
- externalClasses：组件接受的外部样式类。
- observers：组件数据字段监听器，用于监听 properties 和 data 的变化。只能拿到newValue。
- pageLifetimes：组件所在页面的生命周期声明对象。
- lifetimes：组件生命周期声明对象。
7.自定义组件的注意事项
- 因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。
- 自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用 usingComponents 字段）。
- 自定义组件和页面所在项目根目录名不能以“wx-”为前缀，否则会报错。
网友评论