自定义组件才出来没多久,感觉解决了很多的问题,不过刚开始用不免遇到边边角角的问题,希望大家都可以在这个帖子统一记录问题和解决方法,方便快速查找问题。
楼主先来遇到的问题和解决方法:
在引用组件时在页面的 json 文件中进行配置。
{ "usingComponents": { "component-tag-name": "path/to/the/custom/component" } } |
这里的组件名称是随便取得名字;
后面的组件路径使用相对路径,不需要加后缀名称。如: …/test/test
- 按照官网自定义组件写法但没有成功显示??
首先检查下开发工具使用的基础库版本。官网说明要 1.6.3 才能使用自定义组件,在更新1.6.3 版本时间节点之前创建的项目默认基础库是不会自动设置为 1.6.3 的,这个要注意一下。
设置方式:开发工具右上角 > 详情 > 项目设置 > 基础库版本。
先说我一个口误的地方:bindinput 这里的 input 应该叫做事件类型,而后面的 onPageInputChange 才是事件名称;
this.triggleEvent(eventType) 的第一个参数确实是根据事件类型来确定传值的,至于你说的页面有多个相同的事件类型怎么办,我刚测试过,这里组件往页面传值只会对组件内的事件有效,下面就有两个 bindinput 类型的事件,你改变 price 组件里的值,是不会影响到页面中其它的 bindinput 的;
<!-- 以下是对一个自定义组件的引用 --> < price num = "{{price}}" bindinput = "onPageInputChange" /> < view >{{price}}</ view > < view > < input bindinput = 'onInput' ></ input > </ view > |
3. 其实这里的事件类型是可以自定义的,比如页面中为 bindcustom=“onPageInputChange”,在组件中一律使用
this.triggleEvent(‘custom’, {value: 1}) 来触发传值;
4. 还有前面说到的页面和组件中都要有相同的 bindcustom=“onPageInputChange” ,这个说法也是错的,因为我这里的业务需求误导了我最初的认识,这里纠正一下,组件内写不写事件是不影响组件往页面传值的。
请确认是否使用 component 自定义组件的,而不是 template 模板或者 wx-parse 第三方开源工具;
我刚打开项目看了下,我这边没有问题,说明应该不是官方文档的问题,也许你无意间修改了什么代码,可以参照官方组件使用文档仔细检查一遍;
如还有问题,请贴出具体代码以便交流。
@蒋欢Eragon
1. 如果你要定义一个组件,就在它的 json 文件里添加 `“component”: true`。组件应该尽可能的做到黑箱,一个组件的所有文件都放在一个文件夹内,这样如果你的其它项目要用到组件,只需拷贝这个文件夹,就可以使用该组件了,如果都写在 app.json 中,那么你还得修改 app.json。这种设计反而将组件文件和其它文件耦合在一起。
2. 写在比如 home 页面要使用组件,需要在 home.json 中添加配置
{
"usingComponents": {
"component-tag-name": "path/to/the/custom/component"
}
}
看你的意思,是想说把这里的配置移到 app.json 吧。你可以试试可行性。注意看 component-tag-name 这个字段,组件在页面中的标签是可以自定义的。比如 money 组件在 index 页面中可以定义为 <money1></money1>,在 index2 页面中可以定义为 <money2></money2>,如果定义在 app.json,那么自定义组件的标签名就会固定不变。