大家把【自定义组件】遇到的问题和解决方法都统一在这里讨论吧。
发布于 5 年前 作者 jiecheng 3631 次浏览 来自 问答

自定义组件才出来没多久,感觉解决了很多的问题,不过刚开始用不免遇到边边角角的问题,希望大家都可以在这个帖子统一记录问题和解决方法,方便快速查找问题。

楼主先来遇到的问题和解决方法:

  1. 在引用组件时在页面的 json 文件中进行配置。

{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}

        这里的组件名称是随便取得名字;

        后面的组件路径使用相对路径,不需要加后缀名称。如: …/test/test

  1. 按照官网自定义组件写法但没有成功显示??

    首先检查下开发工具使用的基础库版本。官网说明要 1.6.3 才能使用自定义组件,在更新1.6.3 版本时间节点之前创建的项目默认基础库是不会自动设置为 1.6.3 的,这个要注意一下。

    设置方式:开发工具右上角 > 详情  >  项目设置 > 基础库版本。

10 回复

@Mr Lu

这是官方文档,上面也有我实践写的一个组件的示例代码,动手试一试比看要容易理解一点。

表示没看到文档里有写组件用法的地方。。

  1. 先说我一个口误的地方:bindinput 这里的 input 应该叫做事件类型,而后面的 onPageInputChange 才是事件名称;

  2. 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” ,这个说法也是错的,因为我这里的业务需求误导了我最初的认识,这里纠正一下,组件内写不写事件是不影响组件往页面传值的。

前两天测试的好好的,今天一打开,组件引用没有问题,但是样式没有啦,怎么回事,我的天,你们有没有出现这种情况

你的语言已经挺有力的了,我已经传过来了,我觉得这个api还是有问题 后面官方应该会改的

  1. 请确认是否使用 component 自定义组件的,而不是 template 模板或者 wx-parse 第三方开源工具;

  2. 我刚打开项目看了下,我这边没有问题,说明应该不是官方文档的问题,也许你无意间修改了什么代码,可以参照官方组件使用文档仔细检查一遍;

  3. 如还有问题,请贴出具体代码以便交流。

@蒋欢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,那么自定义组件的标签名就会固定不变。

这个 component.json 里设置:“component”: true 难道要用一个组件,写一个对应的json文件吗?为什么不统一写在app.json里呢。要不然用起来好麻烦。

非常有效,解决我的大问题了。

而且问题在于 你触发的事件为什么一定要在页面的元素上去绑定,我觉得你这个应该不是事件子组件触发了页面的事件,只是恰好两个事件类型相同  所以在触发子的时候 触发了父。。。

回到顶部