1. 组件的创建与引用
1.1 创建：新建components文件夹->test文件夹->右击新建component输入test
1.2 引用组件
- 组件的引用方式分为'局部应用'和'全局引用'
- 局部引用：组件只能在当前被引用的页面使用
- 全局应用：组件可以在每个小程序页面使用
1.3 局部引用组件
在页面的json配置文件中引用组件的方式叫局部引用
//页面json文件
{
"usingComponents": {
"my-test":"/components/test/test"
}
}
//wxml文件
<my-test></my-test>
1.4 全局引用组件
在app.json全局配置文件中引用组件的方式叫全局引用
//app.json
{
"usingComponents": {
"my-test2":"/components/test/test"
}
}
//任意页面
<my-test2></my-test2>
1.5 组件和页面的区别
- 组件的json文件中需要声明"component":true属性
- 组件的js文件中调用的时Component()函数
- 组件的事件处理函数需要定义到methods节点中
2. 组件的样式
2.1 组件样式隔离
- 默认情况下，自定义组件的样式只对当前组件生效，不会影响组件外的样式
- 防止了外界的样式影响组件内部的样式
- 防止了组件的样式破坏外界的样式
2.2 注意点
- app.wxss中的全局样式对组件无效
- 只有class选择器会有样式隔离效果，id、属性、标签选择器不受样式隔离的影响
- 建议在组件和引用组件的页面中使用class选择器
2.3 修改组件的样式隔离选项
- 通过styleIsolation修改样式的隔离选项
Component({
options:{
//选项有三个：
//isolated:与外界隔离
//apply-shared:外界可以影响组件，组件不能影响外界
//shared:相互影响
styleIsolation:"isolated",
},
})
3.自定义组件的Component()中的属性
- data：用于定义组件模板渲染的私有数据
- methods方法：定义事件处理函数和自定义方法
- properties:用来接受外界传递到组件的数据。
//与vue不同，在小程序中，propterties属性和data数据的用法相同.
//他们都是可读可写。只不过，data更倾向于存储组件的私有数据，properties倾向于存储外界传递的数据
//由于data和properties本质上相同(this.data===this.properties)，所以properties也可以用于页面渲染，使用setData()也可以修改其中的值
- observers：属性监听器，用于监听和响应任何属性和数据字段的变化，从而执行特定的操作
//数据监听器支持监听对象中单个或多个属性的变化
//使用通配符**来监听对象所有属性的变化
observers:{
'字段A,字段B':function(字段A的的新值，字段B的新值){
//do something
}
}
4. 纯数据字段
- 纯数据字段是指那些不用于界面渲染的data字段
- 有助于提高页面更新的性能
- 在Component构造器中，指定pureDataPattern为正则表达式：pureDataPattern:/^_/,指定所有 _ 开头的数据字段为纯数据字段
5. 组件生命周期函数
Component({
//新的写法
lifetimes: {
created:function(){
//在组件实例刚刚创建时执行
//此时不能调用setData
//只能给组件的this添加一些自定义的属性字段
},
ready: function() {
// 在组件在视图层布局完成后执行
},
moved: function() {
// 在组件实例被移动到节点树另一个位置时执行
},
attached: function() {
// 在组件实例进入页面节点树时执行
//this.data已经被初始化完毕
//绝大多数的初始化工作都在这里完成（发送获取初始数据...）
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
//退出一个页面时，会触发页面内每个自定义组件的detached生命周期函数
//适合做一些清理工作
},
error: function() {
// 每当组件方法抛出错误时执行
},
},
// 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
attached: function() {
// 在组件实例进入页面节点树时执行
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
// ...
})
6. 组件所在页面的生命周期
- 当自定义组件的行为依赖页面状态的变化，就需要组件所在页面的生命周期
//当页面发生变化时触发函数
pageLifetimes:{
show(){ //页面被展示
console.log('show');
},
hide(){ //页面被隐藏
console.log('hide');
},
resize(){ //页面尺寸发生变化
console.log('resize');
}
}
7. 插槽
- 在自定义组件的wxml结构中，可以提供一个节点，用于为组件使用者提供的wxml结构占位
- 小程序中默认每个自定义组件只允许使用一个插槽进行占位
- 使用多个插槽需要启用多个插槽
Component({
options:{
//开启多slot支持
multipleSlots:true
},
})
//自定义组件
<!--components/test4/test4.wxml-->
<view>test4组件</view>
<slot></slot>
<slot name="m1"></slot>
//使用组件
<test4>
<view>slot</view>
<view slot="m1">m1</view>
</test4>
