首先為什么要使用component 這里列舉2個例子,

1 如果項目中多個地方使用同一個彈框, 2 兩個同事合作寫一個界面,

這2中情況使用組件是比較好的選擇

開始吧

第一步首先創(chuàng)建一個包用于存放組件

要把設(shè)置成組件需要在json中聲明

"component": true,

如下直接復(fù)制也行

{

"component": true,

"usingComponents": {}

}

組件里的wxml中就是自己要填寫的內(nèi)容了,要注意的就是js里面不在是Page而是

Component({}) 開頭, 里面可以填寫data 用于初始化數(shù)據(jù), 方法寫在methods中,

這個記住就行了,給出demo里面的

Component({

properties: {

// 這里定義了innerText屬性，屬性值可以在組件使用時指定

innerText: {

type: String,

value: 'default value',

}

},

data: {

// 這里是一些組件內(nèi)部數(shù)據(jù)

someData: {}

},

methods: {

// 這里是一個自定義方法

customMethod: function () {

?

}

}

})

寫好之后就是組合了 在json中填寫

"component": "../component/component"?

開頭是是自己的包名,后面跟著的是自己填寫的包名以及wxml名字

然后就是在wxml中引入即可

如果想在布局上就把引用放到上面,如果想放到下面就吧引用放到下面

效果圖

?

demo地址需要的可以參考下

demo地址,如果幫助了希望給一個免費的star

?

?

總結(jié)

以上是生活随笔為你收集整理的微信小程序自定义组件Component的简单使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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