小程序自定义组件
从基础库版本 1.6.3 开始,小程序终于把其他框架的 自定义组件
这一块的功能复制过来了,除了把 props
改成了写起来更复杂的 properties
,其他方面与 Vue
自定义组件没有区别。
加入了一个全局变量 Component
,可以用来构造一个组件:
Component({
properties: { // 父组件传递参数
},
data: {}, // 自定义组件内部数据
methods: { // 自定组件内部方法
}
})
另外还需要在 json
文件中声明这是一个组件:
{
"component": true
}
除了这两处以外,其他地方与 page
中的 wxml
模版和 wxss
样式没有区别。
真正使用自定义组件的过程,是非常麻烦的,你无法通过 require
来引入相应的组件,必须在 page
的 json
文件中声明:
{
"usingComponents": {
"loading": "../../../../components/loading/index"
}
}
引入的路径是相对路径,尤其是当页面层级很多的时候,简直就是灾难。
自定义组件的事件需要 triggerEvent
来传递,父级组件需要绑定这个方法:
Component({
methods: {
onTap: function(){
this.triggerEvent('customevent', {})
}
}
})
<loading bind:customevent="customFunc"></loading>
Page({
customFunc: function () {
// do something
}
})
还有一些其他的设计,比如组件关系之类的,使用起来也是很复杂。小程序初期故意同当下非常成熟的 mvc
框架保持差异,导致在开发大型项目时异常艰辛,虽然现在还在补足,但是实际开发过程这种有意为难的行为令开发者难受,完全脱离 npm
生态也是当前大环境下一个不切实际的举动。还是推荐使用 wepy
,形式上几乎与开发 Vue
没有太大差异。
评论(1)
最近也有在研究这个东西,谢谢分享