自定义组件的构成

同样是由json wxml wxss js 4个文件组成

声明自定义组件

需要在 json 文件中进行自定义组件声明

{
  "component": true
}

局部样式的使用

组件内的样式只对该组件起作用,而且在组件wxss中不应使用 ID选择器 、属性选择器 和 标签名 选择器。

/* 这里的样式只应用于这个自定义组件 */
.inner {
  color: red;
}

组件的定义

使用 Component 方法来定义组件

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
  }
})

使用自定义组件

在使用该组件的页面 json中进行配置,

{
  "usingComponents": {
   // 自定义标签名 : 组件的路径
    "component-tag-name": "path/to/the/custom/component"
  }
}

然后象普通标签一个引用该自定义组件