mpvue自定义组件

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_33871182/article/details/102743782

创建自定义组件
类似于页面，一个自定义组件由 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>

细节注意事项

一些需要注意的细节：

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

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

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

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