小程序自定义组件

文档地址

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

定义pages/custom/文件夹下

1、在他的filename.json文件添加 "component": true 申明 这组页面为自定义组件

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

filename.wxml：

<view class="inner">
  {{innerText}}
</view>
<slot></slot><!-- 必须加上这个否则这个组件的内部无法在包裹引用这个组件wxml的其他组件元素 -->

 这个组件的wxml中使用多个slot，以不同的 name 来区分。

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

<!-- 引用组件的页面模板 -->
<view>
  <component-tag-name>
    <!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
    <view slot="before">这里是插入到组件slot name="before"中的内容</view>
    <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
    <view slot="after">这里是插入到组件slot name="after"中的内容</view>
  </component-tag-name>
</view>

View Code