微信小程序插槽与模板

一、插槽

在组件模板中可以提供一个 节点，用于承载组件引用时提供的子节点。
1、单个slot，代码示例：

<!--第一步：封装组件，components/music/index.wxml-->
<!--components/music/index.wxml-->
<view>
  <text>我是标准的</text>
  <!--下面是slot插槽（占位），用于承载组件引用时提供的子节点-->
  <slot></slot>
</view>

<!--第二步：引入组件，pages/index/index.wxml-->
<f-music></f-music>
<f-music>
<!-- 下面这部分内容将被放置在组件 <slot> 的位置上 -->
  <view>我是定制的内容</view>
</f-music>

2、多个slot，代码示例：

<!--第一步：封装组件，components/music/index.wxml-->
<view>
 <text>我是标准的</text>
 <!--下面是slot插槽（占位），用于承载组件引用时提供的子节点-->
 <slot name="custom1"></slot>
 <slot name="custom2"></slot>
</view>

// 第二步：启用插槽，components/music/index.js
Component({
  // 启用插槽
  options: {
    multipleSlots: true
  }
})
 

<!--第三步：引用组件，pages/index/index.wxml-->
<f-music>
<view slot="custom2">我是定制的内容2</view>
</f-music>
<f-music>
<!-- 下面这部分内容将被放置在组件 <slot> 的位置上 -->
  <view slot="custom1">我是定制的内容1</view>
  <view slot="custom2">我是定制的内容2</view>
</f-music>

模板

1、WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。
2、如何使用模板

第一步：定义模板

  定义步骤同创建普通页面一样
  <template  name="定义的模板名称">
    
      这里放普通的wxml标签

	</template>



第二步：使用模板
   在需要的页面中引入：
   <import src="指定要引入的模板路径" />
   在嵌入位置添加template来指定
    <template is="指定模板名称" data="{{ 指定要传入的数据}}"></template>
    
    其中：
       is:要引入的模板name名称
   
参考文档：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/template.html