写在前面:
观众老爷们好呀,这里是前端小刘不怕牛牛频道,小程序系列文章又更新了呀。
上文我们讲解了微信小程序自定义组件的入门知识,那么今天牛牛就来讲讲自定义组件的进阶知识吧,赶紧拿起小本本做笔记呀!
自定义组件的数据和方法在使用上,和Vue
的组件十分相似,不过也有一点区别,首先我们来了解一下组件私有数据的定义。
data
中的数据就作为组件的私有数据使用,定义在对应自定义组件js
文件下的component
构造器中,语法如下:
Component({
data : {
a : 10,
b : 20
}
})
这样我们就给组件定义了两个数据,在模板在我们可以直接{{a}}
调用,而在component
构造器中,我们也只需this.a
便可获取到该数据。
methods
中方法的定义也是与Vue
十分相似,位置与上述的data
同级,语法如下:
Component({
methods : {
// 定义一个isShow函数
isShow(){
// do something
}
}
})
不过,在开发中会将methods
方法分为事件处理函数和自定义方法,事件处理函数是监听事件,当事件触发再调用。而自定义方法则是由我们自己调用。
在命名上,建议methods
中的自定义方法以_
开头,以便区分。
properties
可以称之为对外属性,用来接收外界传递给组件的数据。而这个外界就是父组件,也就是说在页面引用自定义组件的时候,可以同时传递数据进去,组件就会通过properties
属性接收传进来的数据。
<son-view username='niuniu'>son-view>
学过Vue
的小伙伴可能就说了,这不就是Vue
的props
属性吗。
对,但不完全对。在微信小程序中,properties
属性里的数据也是可以修改的,这是需要注意的地方。
回归正题,如何在组件中接收这个数据呢?
如果你想给properties
中 的数据定义默认值,若没有传值,则用默认值赋值,那么你需要用完整格式
properties : {
username : {
type: String,
value : xiaoliu
}
}
如果不需要赋默认值,就可以使用简化格式
properties : {
username : String
}
如何修改:
我们还是可以直接调用this.setData
方法进行修改。
this.setData({username : this.username.slice(0, -1)})
数据监听器其实类似于Vue
的watch
监听属性
我们可以选择对某个数据进行监听, 当发生变化时,调用对应的回调函数
Component({
observers : {
'username' : function(username){}
}
})
一个回调函数可以对应监听多个,只需要添加对应参数即可。
监听对象属性字段:
当我们想要监听对象里面的数据,只需要用obj.username
代替上面的username
即可。
需要注意的是,监听对象属性的触发情况,不仅有this.setData
方法改变对象属性值触发,直接给对象赋值也会触发。
简而言之,在data
的数据,不用于界面的渲染,也不传递给其他组件,仅在组件内部使用,我们便可把他定义为纯数据字段,这样做的作用就是提升页面更新的性能
使用方法:
在 Component
构造器的 options
定义段中指定 pureDataPattern
为一个正则表达式,字段名符合这个正则表达式的字段将成为纯数据字段
比如我想要让开头是_
的字段名作为纯数据字段,我可以这样做。
Component({
options : {
pureDataPattern : /^_/
}
})
前面我们提过小程序的生命周期、页面的生命周期,组件的生命周期的作用与前两者一样,帮助程序员在特定的时间点处理一些事情。
组件的生命周期按时间顺序有:
钩子 | 说明 |
---|---|
created |
Component 实例创建时调用 |
attached |
实例进入页面节点树 |
ready |
在组件在视图层布局完成后执行 |
moved |
在组件实例被移动到节点树另一个位置时执行 |
detached |
在组件实例被从页面节点树移除时执行 |
error |
组件方法抛出错误时 |
对于组件来说,最重要的生命周期是 created
、attached
、 detached
created
调用时,组件实例刚创建,不能用setData
,通常只是给this
添加一些自定义的属性字段attached
调用时,this.data
初始化完毕,这时候我们可以做一些初始化工作,比如发送请求获取初始数据detached
调用时,退出页面,此时可以做一些清理性质的工作定义生命周期的方法有新旧两种,旧的方法和Vue
一样,直接在Component
里面定义(第二级)。
而新的方法则是需要在Component
中的lifetimes
中定义,建议使用新的方法定义生命周期。
有时,组件的一些行为需要依赖所在页面生命周期调用的时机,如触发页面的show
时,组件想要显示出欢迎回来的字样
这时候,我们可以在组件中监听页面的生命周期,只需要在Component
的pageLifetimes
中定义即可。
pageLifetimes : {
show : function(){
//触发时调用
}
}
注意:
组件只可访问show
、hide
、resize
三个页面生命周期
今天的小程序文章到这里就结束啦,如果觉得对您有帮助的话,可以关注牛牛接下来的文章
感谢您的支持,您的支持是我们创作的最大动力!!!
债见~~