小程序中的slot插槽

• 插槽的使用场景：
  • 一个自定义组件，可能被页面多处复用，但每处可能需要显示的内容不一样。组件中的某一部分，可能在页面某位置使用时不需要显示，但在其他位置又可能需要它的显示，以上需求，可用slot插槽来实现。
• 使用方法：
  • 把slot标签写在组件里，根据外部(页面)传来的标签，控制插槽内容的显示和隐藏。
  • 如果需要显示想要的内容，就传递相应的标签进来，如果不想显示，就不需要传递。
  • 做好标签插入之后，记得在组件的Component属性列表里启用插槽。
• slot作用：
  • 提高了组件的灵活性和复用性。

举个?：

页面中(或父组件中)插入需要的标签–wxml：

<view class="container">
	<!-- 使用自定义组件（v-tag为自定义组件名称） -->
    <v-tag text="text">
    	<!-- 插入组件中的标签（这里的slot为组件里所定义的插槽名字） -->
      	<text slot="after">{{ nums }}</text>
    </v-tag>
</view>

自定义组件–wxml：

<view class="container">
  <text>{{ text }}</text>
  <!-- 文本后方插入（after为插槽的名字） -->
  <slot name="after"></slot>
</view>

在自定义组件的Component属性列表里启用插槽–js：

Component({
  /**
   * 组件的属性列表
   */
  options: { // 启用插槽
    multipleSlots: true
  },
  properties: { // 开放数据
    text: String
  },
  /**
   * 组件的初始数据
   */
  data: {
  },
  /**
   * 组件的方法列表
   */
  methods: {
  }
})

使用插槽前的效果：

使用插槽后的效果：

声明：上图每个文本标签均为一个自定义组件，标签尾部的数字，是我们使用插槽传进去的text标签。