微信小程序组件封装

类似于页面，一个自定义组件由json wxml wxss js 4个文件组成

1 在json文件中做自定义组件声明

{
    "component": true
}

2 在wxml文件中编写组件模板，在wxss文件中加入组件样式

<view class="inner">
  {{innerText}}
</view>

2.1 tip

001 组件wxss中的样式只作用于这个自定义组件

002 在组件wxss中不应该使用id选择器、属性选择器和标签选择器

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

Component({
  // 组件的对外属性，是属性名到属性设置的映射表
  properties: {
    innerText: {
      type: String,
      value: ‘‘,
      observer(newVal, oldVal, changePath) {}
    },
    myProperty2: String
  },
   data: {},
    methods: {}
})

4 使用自定义组件

4.1 在json文件中进行引用声明

{
  "usingComponents": {
    "component-tag-name": "path/component"
  }
}

4.2 在页面的wxml中就可以像使用基础组件一样使用

<view>
  <component-tag-name inner-text="some text"></component-tag-name>
</view>

5 注意

5.1 因为wxml节点标签名只能是小写字母、中划线和下划线组合，所以自定义组件的标签名也只能包含这些字符。

5.2 自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用usingComponents字段）。

5.3 自定义组件和页面所在项目根目录名不能以"wx-"为前缀，否则会报错。

微信小程序组件封装

原文：https://www.cnblogs.com/pleaseAnswer/p/13953065.html