组件模版和样式

类似于页面，，，，自界说组件拥有自己的 wxml 模版和 wxss 样式。。。。。。

组件模版

组件模版的写法与页面模板相同。。。。。。组件模版与组件数据连系后天生的节点树，，，，将被插入到组件的引用位置上。。。。。。

在组件模板中可以提供一个 <slot> 节点，，，，用于承载组件引用时提供的子节点。。。。。。

代码示例：

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

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

组件wxml的slot

在组件的wxml中可以包括 slot 节点，，，，用于承载组件使用者提供的wxml结构。。。。。。

默认情形下，，，，一个组件的wxml中只能有一个slot。。。。。。需要使用多slot时，，，，可以在组件js中声明启用。。。。。。

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

此时，，，，可以在这个组件的wxml中使用多个slot，，，，以差别的 name 来区分。。。。。。

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

使用时，，，，用 slot 属性来将节点插入赴任别的slot上。。。。。。

<!-- 引用组件的页面模版 -->
<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>