创建组件
项目根目录下,新建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属性用法相同,都是可读可写的但是:
组件完全初始化完毕,进入页面节点树后,attached生命周期函数会触发
组件离开页面节点树后,detached生命周期函数会触发
lifetimes节点
-
data更倾向于存储组件的私有数据
-
properties 存储外界传递给组件的私有数据
-
methods: { 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 }) } } })
纯数据字段
-
不用于界面渲染的 data 字段
某些
data
中的字段(包括setData
设置的字段)既不会展示在界面上,也不会传递给其他组件,仅仅在当前组件内部使用。可以指定这样的数据字段为“纯数据字段”纯数据字段 有助于提升页面更新性能
在
Component
构造器的options
定义段中指定pureDataPattern
为一个正则表达式,字段名符合这个正则表达式的字段将成为纯数据字段。Component({ options:{ pureDataPattern: /^_/ // 指定所有 _ 开头的数据字段为纯数据字段 }, data: { // 将rgb改为以_开头的纯数据字段 _rgb:{ r:0, g:0, b:0, }, fullColor:'0,0,0' }, })
组件生命周期
-
组件全部生命周期
生命周期 参数 描述 最低版本 created 无 在组件实例刚刚被创建时执行 1.6.3 attached 无 在组件实例进入页面节点树时执行 1.6.3 ready 无 在组件在视图层布局完成后执行 1.6.3 moved 无 在组件实例被移动到节点树另一个位置时执行 1.6.3 detached 无 在组件实例被从页面节点树移除时执行 1.6.3 error Object Error
每当组件方法抛出错误时执行 2.4.1 组件主要生命周期
在小程序组件中,最重要的生命周期函数有3个,分别是created,attached,detached
组件实例刚刚被创建好的时候,created生命周期函数会被触发
-
不能调用setData
-
用于给组件的this添加一些自定义的属性字段
-
this.data已被初始化完毕
-
初始化工作,比如发请求
-
退出一个页面时,会触发页面内每个自定义组件的detached生命周期函数
-
清理性质的工作
lifetimes节点
Component({
lifetimes: {
attached: function() {
// 在组件实例进入页面节点树时执行
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
},
// 以下是旧式的定义方式,可以保持对 <2.2.3 版本基础库的兼容
attached: function() {
// 在组件实例进入页面节点树时执行
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
// ...
})
组件所在页面的生命周期
自定义组件的行为依赖于页面状态的变化,就需要用到组件所在页面的生命周期
每当触发页面的show生命周期函数的时候,我们希望能够重新生成一个随机的RGB颜色值
生命周期函数 | 参数 | 描述 |
---|---|---|
show | 无 | 组件所在页面被展示时执行 |
hide | 无 | 组件所在页面被隐藏时执行 |
resize | Object Size | 组件所在页面尺寸变化时执行 |
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() 获取子组件实例对象
-
这样就可以直接访问子组件的任意数据和方法