之前,一直写vue的前端的小伙伴们,对于组件的使用,很熟悉,比如,封装一个组件,往组件里传值,复用等。可是去写小程序后,会发现,小程序的组件,准确来说,应该叫模板,只能复用,wxml 和wxss,也就是只能复用 html 和 css,这样就不能传入值到组件中,实现不同情境下的复用。给写惯了vue,的开发者来说,会有些不适应,同时,给开发带来了很大的困难。
好消息是,最近小程序已经支持,传入值到组件中了。开发者可以像使用vue一样,来使用小程序的组件了。与此同时,小程序的组件和vue的组件,还略有些不同。下面,简单的说下。
小程序组件的新建和pages 中的 页面类似,只不过需要把page 改为 component 即可。
小程序组件中,新增 methods ,类似于 vue的 methods,几乎是一样的,如何写vue的,这里可以就怎么写。
/ * 组件的方法列表 */
methods: {
}
小程序组件中的properties 属性类似于 vue 的props,可以用来接收父组件传来的值。
/**
* 组件的属性列表
* 可以外部设置
*/
properties: {
like : {
type : Boolean,
},
count : {
type : Number,
}
},
如果要在页面中使用组件,只需要在页面的 .json文件中 声明调用的组件,引入即可。
{
"usingComponents": {
"v-like" : "/components/like/index"
}
}
总结 : 微信小程序组件的功能升级,是开发者的福音。