持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情

小程序学习篇（七），今天一起学习一下小程序中关于自定义组件的使用吧！相信学完了小程序系列篇，大家都能开发出自己满意的小程序了。

自定义组件

组件的创建

• 项目的根目录创建一个components文件夹
• 新建一个common文件夹
• 新建一个custom-tabbar文件夹
• 新建一个component，会生成4个文件，.js,.json,.wxml,.wxss

组件的引用

按需引入，在需要用到的页面的.json中引入组件

{
  "usingComponents": {
    "custom-tabbar": "../../../../components/common/custom-tabbar/custom-tabbar",
  }
}

<custom-tabbar from="classroom"></custom-tabbar>

组件和页面的区别

• 组件的.json文件需要声明“component”:true属性
• 组件的.js文件调用Component（）函数
• 组件的事件处理函数需要定义到methods中

组件的样式

• 组件样式隔离，不会影响其他组件，只对当前组件有效。
• 在小程序中使用class选择器，不要使用id，属性选择器

修改组件样式隔离选项

由于自定义组件具有隔离性，但是，常常我们希望在页面中可以修改组件的样式，可以通过styleIsolation来修改组件的隔离选项

Component({
    options: {
        addGlobalClass: true
    },
})

或者

{
    “styleIsolation”: 'isolated'
}

组件的属性方法

• 数据放在data中
• 方法放在methods中
• properties用来存放外界传递进来的数据

组件的数据监听器

什么是数据监听器

数据监听器用来监听和响应属性和数据字段的变化，类似于vue中的watch监听器。

Component({
    observers: {
        'name': function(oldVal,newVal){
            // 代码逻辑
        }
    }
})

纯数据字段

是那些不用于界面渲染的data字段，有利于提升页面的性能

使用规则

Component({
    options: {
        pureDataPattern: /^_/,// 指定以_开头的数据字段为纯数据字段
    },
    data:{
        a: true,
        _a: true,// 纯数据字段
    }
})

组件的生命周期

生命周期函数	描述
created	组件被创建时执行
attached	组件进入页面节点时执行
ready	组件在视图层布局完成后执行
moved	组件被移到另一个位置时执行
datached	组件被页面节点移除时执行

component({
    lifetimes：{
        attached(){}
    }
})

组件所在页面的生命周期

component({
    pagelifetimes：{
        show: function(){},
        hide: function(){},
        resize: function(){},
    }
})