小程序的組件和頁面的代碼結(jié)構(gòu)是不一樣的，不是像vue、react那些一樣，頁面是通過Page生成，組件是通過Component，下面介紹下常用到的

#data

很明顯和頁面上定義的data沒有差別

#properties

接收的屬性，類似于vue中的props

#options

配置項(xiàng)，像addGlobalClass就是允許添加全局樣式，就是全局樣式能否在組件中生效，multipleSlots是否使用插槽slot

#ready

組件初始化的方法

#methods

定義方法的地方

?

使用組件的幾個(gè)重要步驟

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

2、像下面代碼這樣定義好組件的代碼結(jié)構(gòu)

3、在.json文件中設(shè)置，如下：{

"component": true

}

4、頁面使用組件時(shí)，在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: {} })

?

總結(jié)

以上是生活随笔為你收集整理的小程序开发(5)-之封装组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。