小程序自定义组件

类似于页面，一个自定义组件由 .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

filename.wxss(不要用id选择器属性选择器和标签名选择器)

.inner {
  color: red;
}

filename.js 需要使用 Component() 来注册组件

Component({
  properties: {// 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {  //这里的属性用驼峰 其他页面调用该自定义组件时 wxml上指定该属性为wxml标签属性时必须转为小写加-  如：inner-text，如果指定属性值则是数据绑定则采用驼峰命名法
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod() {}
  }
})

使用该组件：

如pages/index页要使用该自定义组件则：

index.json申明

{
  "usingComponents": {
    //"组件名": "自定义组件文件路径"//下面的的小程序会依次调用filename.js/filename.json/filename.wxss/filename.wxml
    "component-tag-name": "/custom/filename"
  }
}

wxml使用该组件

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

效果：。。。

样式的继承：

组件的wxss只对组件生效

组件和引用组件的页面不能使用id选择器（如：#a）、属性选择器（如：[a]、a[href][title] {color:red;}）和标签名（button{color:red}）选择器，请改用class选择器。
组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用。
子元素选择器（.a>.b）只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况。
继承样式，如 font 、 color ，会从组件外继承到组件内。
除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效。

1.7.2版本以上在组件wxss中可以用:host指定它的默认样式

:host {
  color: yellow;
}
<!-- pages页面的 WXML 使用此组件时组件的默认颜色是黄色 -->
<custom-component>这段文本是黄色的</custom-component>

page外传入样式：

/* 组件 custom-component.js 就是文件 定义类名*/
Component({
  externalClasses: ['my-class']
})


<!-- 组件 custom-component.wxml  放入样式 -->
<custom-component class="my-class">
  这段文本的颜色由组件外的 class 决定
</custom-component>



pages页面使用此组件
<!-- 页面的 WXML -->
<custom-component my-class="red-text" />


/*然后调用此组件pages页面wxss定义下面的样式 组件内的文字就变红客*/
.red-text {
  color: red;
}