【小程序】组件功能简记——组件模板与样式

一、 声明组件

1.在json文件输入{ "component": true }定义文件当前为组件
2.声明组件后可在.wxml–wxss中编写内容
3.组件中样式文件只应用与当前组件
4.组件wxss中不应使用ID选择器、属性选择器、标签选择器
5.自定义组件js文件中，需要使用Component()来注册组件，来提供组件的属性定义，内部数据和自定义方法

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

二、使用组件

1.某个页面需要使用组件前，需要在json文件中进行声明引用组件。

{
  "usingComponents": {
    "名称": "组件路径"
  }
}

2.在wxml中就可以像基础组件一样使用自定义组件：<名称></名称>
3.在组件中使用<slot>提供子节点，用于使用组件过程中提供子节点

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

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

注意：默认情况下组件中只能有一个slot节点，需要使用多个slot时，可以在json文件中声明

Component({
  options: {
   // 在组件定义时的选项中启用多slot支持
    multipleSlots: true
  },
})

<!--此时，可以在这个组件的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>

注意：组件样式只在对应的组件中生效。编写组件样式时，需注意：

组件对应 wxss 文件的样式，只对组件wxml内的节点生效。编写组件样式时，需要注意以下几点：
1).组件和引用组件的页面不能使用id选择器（#a）、属性选择器（[a]）和标签名选择器，请改用class选择器。
2).组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用。
4).子元素选择器（.a>.b）只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况。
5).继承样式，如 font 、 color ，会从组件外继承到组件内。
6).除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效（除非更改组件样式隔离选项）。

#a { } /* 在组件中不能使用 */
[a] { } /* 在组件中不能使用 */
button { } /* 在组件中不能使用 */
.a > .b { } /* 除非 .a 是 view 组件节点，否则不一定会生效 */

组件样式隔离：

默认情况下，自定义组件的样式只受到自定义组件 wxss 的影响。除非以下两种情况：

1).app.wxss 或页面的 wxss 中使用了标签名选择器（或一些其他特殊选择器）来直接指定样式，这些选择器会影响到页面和全部组件。通常情况下这是不推荐的做法。
2).指定特殊的样式隔离选项styleIsolation

Component({
  options: {
    styleIsolation: 'isolated'
  }
})
//isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）；
//apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；
//shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。）
//使用后两者时，请务必注意组件间样式的相互影响。

外部样式：

有时，组件希望接受外部传入的样式类。此时可以在Component 中用 externalClasses定义段定义若干个外部样式类。
这个特性可以用于实现类似于 view 组件的 hover-class 属性：页面可以提供一个样式类，赋予 view 的 hover-class ，这个样式类本身写在页面中而非 view 组件的实现中。

注意：在同一个节点上使用普通样式类和外部样式类时，两个类的优先级是未定义的，因此最好避免这种情况。

/* 组件 custom-component.js */
Component({
  externalClasses: ['my-class']
})

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