微信小程序自定义组件

组件 component-name

component-name.json

{
  "component": true,
  "usingComponents": {}
}

component-name.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

component-name.wxml

<!-- 组件模板 -->
<view class="wrapper">
  <view>这里是组件的内部节点</view>
  <slot></slot>
</view>

引入组件的页面 index

index.json

{
  "usingComponents": {
    "my-component": "/components/component-name"
  }
}

index.wxml

<!-- 引用组件的页面模版 -->
<view>
  <my-component>
     <view>这里是插入到组件slot中的内容</view> 
  </my-component>
</view>