组件
复用性强
创建组件
-
项目根目录下,新建components
-
components---->新建文件夹 mycom--->myCom文件夹右击 新建component 输入组件的名称回车自动生成4个文件
引入组件
全局引入
组件可以在每个小程序页面中使用
多个页面都会用到该组件使用 全局
app.json
注册组件
"usingComponents":{
"my-com":"/components/myCom/myCom"
},
使用组件
<my-com></my-com>
局部引入
组件只能在当前被引入的页面中使用
页面的json中
{
"usingComponents": {
"my-text":"/components/myText/myTest"
}
}
使用组件
<my-text></my-text>
组件和页面的区别
都是由4个文件组成 .js .json .wxml .wxss
组件的json文件中需要声明 "component": true,
组件的 .js文件中调用Component() 函数
组件的事件处理函数需要定义到methods中
页面
页面的 .js中调用 Page()方法
样式
一般情况下,自定义组件的样式只对当前组件生效,不会影响到组件之外的ui结构
-
组件myCom的样式不会影响组件myText
-
组件myCom的样式不会影响小程序页面
-
小程序页面的样式不会影响组件myCom和组件myText
app.wxss中的全局样式对组件无效
只有class选择器有样式隔离的影响,id,标签,属性选择器不受样式隔离的影响
建议使用class选择器
data数据
定义组件的数据
data: {
count:0
},
methods方法
事件处理函数 和自定义方法定义到methods中
methods: {
addCount(){
this.setData({
count:this.data.count+1
})
this.showCount()
},
showCount(){
wx.showToast({
title: 'count值为'+this.data.count,
})
}
}
properties
父传子
properties是组件的对外属性,用来接收外界传递给组件中的数据
//父组件
<my-com tit="2202A大哥们好" num="{{20}}"></my-com>
properties: {
tit:{
type:String, //数据类型
value:'hello' //默认值
},
num:Number
},
properties和data的区别
-
小程序的组件中,properties属性和data属性用法相同,都是可读可写的但是:
-
data更倾向于存储组件的私有数据
-
properties 存储外界传递给组件的私有数据
-
addCount(){
console.log(this.data) //{count: 0, tit: "2202A大哥们好", num: 20}
console.log(this.properties)
// 本质上一样的,都是可读可写的
console.log(this.properties===this.data) //true
}
}
使用setData修改properties的值
this.setData({
num:this.properties.num+2
})
数据监听器
监听和响应任何属性和数据字段的变化,从而执行特定的操作
Component({
observers:{
'字段A,字段B':function(字段A的新值,字段B的新值){
//代码
}
}
})
代码
<view class="box">
<view>{{n1}}+{{n2}}={{sum}}</view>
<button bindtap="addN1">n1+1</button>
<button bindtap="addN2">n2+1</button>
</view>
Component({
/**
* 组件的初始数据
*/
data: {
n1:0,
n2:0,
sum:0
},
observers:{
'n1,n2':function(newN1,newN2){
this.setData({
sum:newN1+newN2
})
}
},
/**
* 组件的方法列表
*/
methods: {
addN1(){
this.setData({
n1:this.data.n1+1
})
},
addN2(){
this.setData({
n2:this.data.n2+1
})
}
}
})
监听对象属性的变化
支持监听对象中单个或多个属性的变化
Component({
observers: {
'some.field.**': function(field) {
// 使用 setData 设置 this.data.some.field 本身或其下任何子数据字段时触发
// (除此以外,使用 setData 设置 this.data.some 也会触发)
field === this.data.some.field
},
},
attached: function() {
// 这样会触发上面的 observer
this.setData({
'some.field': { /* ... */ }
})
// 这样也会触发上面的 observer
this.setData({
'some.field.xxx': { /* ... */ }
})
// 这样还是会触发上面的 observer
this.setData({
'some': { /* ... */ }
})
}
})
案例
wxml
{{fullColor}}
<view style="background-color:rgb({{fullColor}});" class="colorbox">
{{fullColor}}
</view>
<button bindtap="changR" size="mini">R</button>
<button bindtap="changG" size="mini">G</button>
<button bindtap="changB" size="mini">B</button>
js
Component({
/**
* 组件的初始数据
*/
data: {
rgb:{
r:0,
g:0,
b:0,
},
fullColor:'0,0,0'
},
// 监听对象中属性的变化
observers:{
'rgb.r,rgb.g,rgb.b':function(r,g,b){
this.setData({
fullColor:`${r},${g},${b}`
})
}
},
/**
* 组件的方法列表
*/
methods: {
changR(){
this.setData({
'rgb.r':this.data.rgb.r+5>255?255:this.data.rgb.r+5
})
},
changG(){
this.setData({
'rgb.g':this.data.rgb.g+5>255?255:this.data.rgb.g+5
})
},
changB(){
this.setData({
'rgb.b':this.data.rgb.b+5>255?255:this.data.rgb.b+5
})
}
}
})
组件生命周期
组件全部生命周期
组件主要生命周期
在小程序组件中,最重要的生命周期函数有3个,分别是created,attached,detached
组件实例刚刚被创建好的时候,created生命周期函数会被触发
-
不能调用setData
-
用于给组件的this添加一些自定义的属性字段
组件完全初始化完毕,进入页面节点树后,attached生命周期函数会触发
-
this.data已被初始化完毕
-
初始化工作,比如发请求
组件离开页面节点树后,detached生命周期函数会触发
-
退出一个页面时,会触发页面内每个自定义组件的detached生命周期函数
-
清理性质的工作
lifetimes节点
#### 组件主要生命周期
> 在小程序组件中,最重要的生命周期函数有3个,分别是created,attached,detached
组件实例刚刚被创建好的时候,created生命周期函数会被触发
- 不能调用setData
- 用于给组件的this添加一些自定义的属性字段
组件完全初始化完毕,进入页面节点树后,attached生命周期函数会触发
- this.data已被初始化完毕
- 初始化工作,比如发请求
组件离开页面节点树后,detached生命周期函数会触发
- 退出一个页面时,会触发页面内每个自定义组件的detached生命周期函数
- 清理性质的工作
#### lifetimes节点
组件所在页面的生命周期
自定义组件的行为依赖于页面状态的变化,就需要用到组件所在页面的生命周期
每当触发页面的show生命周期函数的时候,我们希望能够重新生成一个随机的RGB颜色值
Component({
pageLifetimes: {
show: function() {
// 页面被展示
},
hide: function() {
// 页面被隐藏
},
resize: function(size) {
// 页面尺寸变化
}
}
})
页面展示的时候,重新生成一个随机的RGB颜色值
Component({
pageLifetimes:{
show(){
this._randomColor()
}
},
methods:{
_randomColor(){
this.setData({
_rgb:{
r:Math.floor(Math.random()*256),
g:Math.floor(Math.random()*256),
b:Math.floor(Math.random()*256)
}
})
}
}
})
插槽
什么是插槽
组件的wxml中可以提供一个<slot>节点,用于承载组件引用时提供的子节点。
传递单个slot
需要使用多 slot 时,可以在组件 js 中声明启用。
options: {
multipleSlots: true // 在组件定义时的选项中启用多 slot 支持
},
组件
<text>components/myTest/myTest.wxml</text>
<view>hello</view>
<slot name="one"></slot>
<view>good</view>
<slot name="two"></slot>
页面
<my-test>
<view slot="one">
<text>123</text>
</view>
<view slot="two">
<text>345</text>
</view>
</my-test>
父子组件通信
父子组件之间通信的 3 种方式
① 属性绑定
-
用于父组件向子组件的指定属性设置数据,仅能设置 JSON 兼容的数据
② 事件绑定
-
用于子组件向父组件传递数据,可以传递任意数据
③ 获取组件实例
-
父组件还可以通过 this.selectComponent() 获取子组件实例对象
-
这样就可以直接访问子组件的任意数据和方法