微信小程序--组件复用（创建自定义组件）

组件所需文件如下：

创建自定义组件

// my-component.wxml
<view class="inner">
  {{innerText}}
</view>
<slot></slot>

接收组件参数

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

声明是自定义组件

//my-component.json
{
  "component": true,
  "usingComponents": {}
}

引入组件

//index.json
{
  "usingComponents": {
    "my-component": "/components/my-component"
  }
}

使用组件

//index.wxml
<view>
  <!-- 以下是对一个自定义组件的引用 -->
  <my-component inner-text="Some text"></my-component>
</view>