微信小程序自定义组件的用法（【微信小程序】自定义组件（二））
🎁写在前面：
观众老爷们好呀 ，这里是前端小刘不怕牛牛频道 ，小程序系列文章又更新了呀 。
上文我们讲解了微信小程序自定义组件的入门知识 ，那么今天牛牛就来讲讲自定义组件的进阶知识吧 ，赶紧拿起小本本做笔记呀！
文章目录
一 ，组件的数据和方法 1.1 data数据 1.2 methods方法 1.3 properties属性 二 ，数据监听器 三 ，纯数据字段 四 ，组件的生命周期 4.1 生命周期阐述 4.2 定义生命周期 4.2 监听组件所在页面的生命周期一 ，组件的数据和方法
自定义组件的数据和方法在使用上 ，和Vue的组件十分相似 ，不过也有一点区别 ，首先我们来了解一下组件私有数据的定义 。
1.1 data数据
data中的数据就作为组件的私有数据使用 ，定义在对应自定义组件js文件下的component构造器中 ，语法如下：
Component({ data : { a : 10, b : 20 } })这样我们就给组件定义了两个数据 ，在模板在我们可以直接{{a}}调用 ，而在component构造器中 ，我们也只需this.a便可获取到该数据 。
1.2 methods方法
methods中方法的定义也是与Vue十分相似 ，位置与上述的data同级 ，语法如下：
Component({ methods : { // 定义一个isShow函数 isShow(){ // do something } } })不过 ，在开发中会将methods方法分为事件处理函数和自定义方法 ，事件处理函数是监听事件 ，当事件触发再调用 。而自定义方法则是由我们自己调用 。
在命名上 ，建议methods中的自定义方法以_开头 ，以便区分 。
1.3 properties属性
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 : /^_/ } })四 ，组件的生命周期
前面我们提过小程序的生命周期 、页面的生命周期 ，组件的生命周期的作用与前两者一样 ，帮助程序员在特定的时间点处理一些事情 。
4.1 生命周期阐述
组件的生命周期按时间顺序有：
钩子 说明 created Component实例创建时调用 attached 实例进入页面节点树 ready 在组件在视图层布局完成后执行 moved 在组件实例被移动到节点树另一个位置时执行 detached 在组件实例被从页面节点树移除时执行 error 组件方法抛出错误时对于组件来说 ，最重要的生命周期是 created 、attached 、 detached
created调用时 ，组件实例刚创建 ，不能用setData ，通常只是给this添加一些自定义的属性字段 当attached调用时 ，this.data初始化完毕 ，这时候我们可以做一些初始化工作 ，比如发送请求获取初始数据 而当detached调用时 ，退出页面 ，此时可以做一些清理性质的工作4.2 定义生命周期
定义生命周期的方法有新旧两种 ，旧的方法和Vue一样 ，直接在Component里面定义（第二级） 。
而新的方法则是需要在Component中的lifetimes中定义 ，建议使用新的方法定义生命周期 。
4.2 监听组件所在页面的生命周期
有时 ，组件的一些行为需要依赖所在页面生命周期调用的时机 ，如触发页面的show时 ，组件想要显示出欢迎回来的字样
这时候 ，我们可以在组件中监听页面的生命周期 ，只需要在Component的pageLifetimes中定义即可 。
pageLifetimes : { show : function(){ //触发时调用 } }注意：
组件只可访问show 、hide 、resize三个页面生命周期
今天的小程序文章到这里就结束啦 ，如果觉得对您有帮助的话 ，可以关注牛牛接下来的文章
感谢您的支持 ，您的支持是我们创作的最大动力！！！
债见~~
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！