# 虚拟组件节点

基础库 '2.11.2' 开始支持，低版本需做兼容处理。

默认情况下，自定义组件本身的那个节点是一个“普通”的节点，使用时可以在这个节点上设置 class style、动画、flex 布局等（就如同普通的 view 组件节点）。

<!-- 页面的 WXML -->
<view style="display: flex">
  <custom-component style="color: blue; flex: 1">蓝色、满宽的</custom-component>
</view>

# 启用组件节点虚拟化

有时，自定义组件并不希望这个节点本身响应 flex 布局，而是希望自定义组件内部的第一层节点能够响应 flex 布局。还有些时候，自定义组件不希望这个节点本身是一个“普通“可以设置样式的节点。

这种时候，可以将这个自定义组件设置为“虚拟的”：

export default Component({
  options: { virtualHost: true },
})

这样，可以将 flex item 放入自定义组件内部：

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

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

# 保留 class 和 style 能力

对于虚拟的组件节点，它的 class style 和动画将不再生效，但仍然可以：

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

export default Component()
  .options({ virtualHost: true })
  .property('style', String)
  .externalClasses(['class'])
  .register()