微信小程序 自定义组件常规使用

微信小程序中自定义组件使用封装：

官网API文档：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html

基本使用：

使用代码细节：

1.自定义的组件内容：

//本例以其中一个自定义组件为参考
//wxml文档 wxss样式文件忽略展示...
<view class="wrapper">
  <slot name="first"></slot>
  <view class="finance">
     我是componentdemo02组件
  </view>
  <slot name="last"></slot>
</view>
//json 文档
{
  "component": true,
  "usingComponents": { //自定义组件中引用的其他插件组件
    "van-loading": "/miniprogram/vant-weapp/loading/index",
    "van-icon": "/miniprogram/vant-weapp/icon/index",
    "van-tabs": "/miniprogram/vant-weapp/tabs/index",
    "van-tab": "/miniprogram/vant-weapp/tab/index"
  }
}
//js 文档
Component({
  //
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   */
  properties: {

  }, 
  /**
   * 组件的初始数据
   */ 
  data: {
    active: 0
  },
    
  /**
   * 组件的方法列表
   */
  methods: {
    // 返回
    back() {
      wx.navigateBack({
        delta: 1
      })
    },
  }
})

2.引用自定义组件的展示：

//wxml 使用
<view>
  <my-component>
    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
     <view>这里是插入到组件slot中的内容</view> 
  </my-component> 
   
  <view>其他内容</view>

  <my-component2>
    <!-- 这部分内容将被放置在组件 <slot name="first"> 的位置上 -->
     <view slot="first">这里是componentdemo2 first</view>
    <!-- 这部分内容将被放置在组件 <slot name="last"> 的位置上 -->
      <view slot="last">这里是componentdemo2 last</view>  
  </my-component2>
</view>

//json 引入组件
{ 
  "usingComponents": {
    "my-component": "/components/componentdemo01/component-tag-name",
    "my-component2": "/components/componentdemo2/compontentdemo02"
  }
}

//js 没有内容设置时
const app = getApp()
Page({
  data: {

  },
  onLoad: function () { 
  },
})

以上内容仅供简单参考，具体细节请参考官方API文档说明；