小程序开发(5)-之封装组件

小程序的组件和页面的代码结构是不一样的，不是像vue、react那些一样，页面是通过Page生成，组件是通过Component，下面介绍下常用到的

#data

很明显和页面上定义的data没有差别

#properties

接收的属性，类似于vue中的props

#options

配置项，像addGlobalClass就是允许添加全局样式，就是全局样式能否在组件中生效，multipleSlots是否使用插槽slot

#ready

组件初始化的方法

#methods

定义方法的地方

 

使用组件的几个重要步骤

1、定义好.js、.json、.wxml、.wxss文件

2、像下面代码这样定义好组件的代码结构

3、在.json文件中设置，如下：{

"component": true

}

4、页面使用组件时，在usingComponents属性上添加上组件的名称和路径，如下：

{
  "usingComponents": {
    "near-event": "/components/nearevent/nearevent"
  }
}

const config = require('../../config/config.js');
const util = require('../../utils/util.js');
const icons = require('../../utils/icons.js');
const app = getApp();

Component({
    data: {
        icons: icons
    },
    properties: {
        data: {
      type: Array,
      value: []
    },
  },
  options: {
    addGlobalClass: true,
    multipleSlots: true
  },
    ready: function() {
    
  },
  methods: {
        
    }
})