自定义组件
组件的创建与引用
创建组件
1.在项目的根目录中,鼠标右键,创建components–>test文件夹
2.在新建的components–>test文件夹上,鼠标右键,点击“新建Component”
3.为新建的组件命名之后,会自动生成对应的4个文件,后缀名为.js,.json,.wxml,wxss
注意:尽量将不同的组件,存放在单独的文件夹中,从而保证清晰的目录结构
引用组件
1.在需要引用的组件的页面中,找到页面的.json配置文件,新增usingComponents节点
2.在usingComponents中,通过键值对的形式,注册组件;键为注册组件名称,值为组件的相对引用路径
3.在页面的.wxml文件中,把注册的组件名称,以标签形式在页面上使用,即可把组件展示在页面上
注意:注册组件名称时,建议把名称注册为短横线连接的形式,例如vant-button或custom-button
使用样式美化组件
组件对应的wxss文件的样式,只对组件wxml内的节点生效。编写组件样式时,需要注意以下几点:
1.组件和引用组件的页面不能使用id选择器,属性选择器和标签选择器,请改用class选择器
2.组件和引用组件的页面使用后代选择器,在一些极端情况会有非预期的表现,如遇,请避免使用
3.子元素选择器只能用于view组件与其子节点之间,用于其它组件可能导致非预期的情况
4.继承样式如font、color\会从组件外继承到组件内
5.除继承样式外,app.wxss中的样式、组件所在页面的样式对自定定义组件无效
组件的data与methods
使用data定义组件的私有数据
小程序组件中的data和小程序页面中的data用法一致,只不过:
1.页面中的data定义在Page()函数中
2.组件的data定义在Component()函数中
在组件的.js文件中:
1.如果要访问data中的数据,直接使用this.data.数据名称即可
2.如果要为data的数据重新赋值,调用this.setData({数据名称:新值})即可
在组件的.wxml文件中:
如果要渲染data中的数据,直接使用{{数据名称}}
使用methods定义组件的事件处理函数
和页面不同,组件的事件处理函数,必须定义在methods节点中。示例代码:
methods: {
xx:function(){
this.setData({
name: 'lz'
})
}
}
组件的properties
1.properties的作用
类似于vue组件中的props,小程序组件中的properties,是组件的对外属性,用来接收外界传递到组件中的数据。
在小程序中,组件的properties和data的用法类似,它们都是可读可写的,只不过:
1.data更倾向于存储组件的私有数据
2.properties更倾向于存储外界传递到组件中的数据
2.声明properties的两种方式
3.为组件传递properties的值
4.在组件内修改properties的值
数据监听器
什么是数据监听器
示例代码:
observers:{
'propCount,name':function(newpropcount,newname){
console.log('最新newpropcount值为', newpropcount),
console.log('最新newname值为', newname)
}
2.监听子数据字段的变化
3.使用通配符**监听所有子数据字段的变化
组件的生命周期
1.组件的主要声明周期
2.组件的全部生命周期函数
3.定义生命周期函数
4.组件所在页面的生命周期
示例代码
组件插槽
1.默认插槽
在组件的wxml中可以包含slot节点,用于承载组件使用者提供的wxml结构
默认情况下,一个组件的wxml中只能有一个slot。需要使用多个slot时,可以在组件js中声明
注意:小程序中目前只有默认插槽和多个插槽,暂不支持作用域插槽
2.启用多个插槽
3.定义多个插槽
4.使用多个插槽
组件间的通信
组件之间的三种基本通信方式
2.this.selectComponent(string)
3.通过事件监听实现子向父传值