自定义组件详解-优快云博客

自定义组件的目的是组件化的复用问题。

组件的书写和页面的书写是一样的，当组件和数据结合之后会生成DOM树。

当然可以在组件中预留插槽来来承载组件中预留的子节点。

在模版中引用节点时候需要在json文件中显示定义，否则会被认为是无定义的节点。

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


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


// 引入组件时候需要在json文件显示定义
{
   "usingComponents": {
    "mp-searchbar": "../../components/searchbar/searchbar"
  },
}

数据绑定

当然，父组件当然可以向子组件通过prop传递参数，

自基础库版本 2.0.9 开始，还可以在数据中包含函数（但这些函数不能在 WXML 中直接调用，只能传递给子组件）。666

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

组件wxml的slot

默认只能添加一个slot插槽，需要添加定义来允许添加多个slot插槽，且不能重名

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

组件样式

组件对应的wxss对应的样式只能对组件内的节点有效。注意：

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

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

/* 组件 custom-component.wxss */
:host {
  color: yellow;
}

除此以外，组件可以指定它所在节点的默认样式，使用 :host 选择器。 >基础库 1.7.2

组件的样式隔离

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

app.wxss 或页面的 wxss 中使用了标签名选择器（或一些其他特殊选择器）来直接指定样式，这些选择器会影响到页面和全部组件。
指定特殊的样式隔离选项 styleIsolation 。

component: ({
  options {
    styleIsolation: 'isolated',  //取值
  }
})

styleIsolation的取值有：  `>基础库版本 2.6.5 `
- isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）；
- apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；
- shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了,
- apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。）
`如果这个 Component 构造器用于构造页面 ，则默认值为 shared`

还有以下几个额外的样式隔离选项可用:
- page-isolated 表示在这个页面禁用 app.wxss ，同时，页面的 wxss 不会影响到其他自定义组件；
- page-apply-shared 表示在这个页面禁用 app.wxss ，同时，页面 wxss 样式不会影响到其他自定义组件，但设为 - shared 的自定义组件会影响到页面；
- page-shared 表示在这个页面禁用 app.wxss ，同时，页面 wxss 样式会影响到其他设为 apply-shared 或 shared 的自定义组件，也会受到设为 shared 的自定义组件的影响。


可以在json中配置styleIsolation, `>基础库版本 2.10.1 `
{
  "styleIsolation": "isolated"
}

Component : ({
   options: {
     addGlobalClass: true
   }
})  //这个选项等价于设置 styleIsolation: apply-shared,但设置了 styleIsolation 选项后这个选项会失效。

外部样式类

基础库 1.9.90

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

// 使用
<!-- 组件 custom-component.wxml -->
<custom-component class="my-class">这段文本的颜色由组件外的 class 决定</custom-component>
                                                         
                                                         
// 基础库 2.7.1 
可以指定多个对应的 class 。

引用页面或父组件的样式

>基础库 2.9.2

注意：如果组件是比较独立、通用的组件，请优先使用外部样式类的方式，而非直接引用父组件或页面的样式。

// 页面 wxss 
.blue-text {
  color: blue;
}
// 组件中可以使用 ～ 来使用
<view class="~blue-text"> 这段文本是蓝色的 </view>


// 一个组件的父组件 wxss 中
.red-text {
  color: red;
}
// 组件中可以使用 ^ 来引用
<view class="^red-text"> 这段文本是红色的 </view>

虚拟化组件节点

默认情况下，引入的自定义组件本身就是一个就是一个“普通”的节点。可以在那个节点上设置style/class/动画/flex等，就如同普通节点操作一样。

<!-- 页面的 WXML -->
<view style="display: flex">
  <!-- 默认情况下，这是一个普通的节点 -->
  <custom-component style="color: blue; flex: 1">蓝色、满宽的</custom-component>
</view>

但有些时候，自定义组件并不希望这个节点本身可以设置样式、响应 flex 布局等，而是希望自定义组件内部的第一层节点能够响应 flex 布局或者样式由自定义组件本身完全决定。

可以将这个自定义组件设置为“虚拟的”:

// xxx.js
Component({
  options: {
    virtualHost: true
  },
  properties: {
    style: { // 定义 style 属性可以拿到 style 属性上设置的值
      type: String,
    }
  },
  externalClasses: ['class'], // 可以将 class 设为 externalClasses
})


// <!-- 页面的 WXML -->
<view style="display: flex">
  <!-- 如果设置了 virtualHost ，节点上的样式将失效 -->
  <custom-component style="color: blue">不是蓝色的</custom-component>
</view>

<!-- custom-component.wxml -->
<view style="flex: 1">
  满宽的
  <slot></slot>
</view>

需要注意的是，自定义组件节点上的 class style 和动画将不再生效，但仍可以：

将 style 定义成 properties 属性来获取 style 上设置的值；
将 class 定义成 externalClasses 外部样式类使得自定义组件 wxml 可以使用 class 值。

详情