mpvue自定义组件

最新推荐文章于 2022-06-19 17:19:35 发布

原创最新推荐文章于 2022-06-19 17:19:35 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#mpvue

mpvue小程序专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何在MPVue中创建和使用自定义组件。组件由.json、.wxml、.wxss和.js文件组成，需在.json文件声明并用Component()注册。组件属性、内部数据和方法定义在.js文件，外部样式可通过externalClasses设置。在使用组件的页面中需指定对应class。注意WXML节点标签限制，组件可引用其他组件，但避免以“wx-”开头的名称。使用usingComponents会影响页面this对象，且setData不进行深复制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建自定义组件
类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可这一组文件设为自定义组件）：
.json （不能有注释语句）

{
  "component": true,// 自定义组件声明
 "usingComponents": {
    //可引用其他组件
  }
}

在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。

.js
外部样式属性：externalClasses 可以是 1个或多个（string or array）

Component({
externalClasses: ['custom-class'],//多个['one-class','two-class']
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定,子父级传参数
    value: { //属性
      type: String, //类型
      value: 'default value',//默认值
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法 ，子父级传参数
    customMethod() {}
  }
})

.wxml
在组件标签里写上class

<view class="custom-class "></view>

.vue

在使用组件的页面里的标签里写上属性要对应的class类名

<k-view :custom-class = "my-class"></view>

细节注意事项

一些需要注意的细节：

因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。
自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用 usingComponents 字段）。
自定义组件和页面所在项目根目录名不能以“wx-”为前缀，否则会报错。

注意，是否在页面文件中使用 usingComponents 会使得页面的 this 对象的原型稍有差异，包括：

使用 usingComponents 页面的原型与不使用时不一致，即 Object.getPrototypeOf(this) 结果不同。
使用 usingComponents 时会多一些方法，如 selectComponent 。
出于性能考虑，使用 usingComponents 时， setData 内容不会被直接深复制，即 this.setData({ field: obj }) 后 this.data.field === obj。（深复制会在这个值被组件间传递时发生。）

如果页面比较复杂，新增或删除 usingComponents 定义段时建议重新测试一下。