Vue-slot（插槽）-526互联

以下均已父组件为例：<my-box></my-box>

<slot></slot>

（无需安装，直接使用，使用组件时需引入对应组件）

说明：插槽就是内容分发API，将 <slot></slot> 作为承载内容分发的出口；简单的讲就是使用了插槽后就可以将<my-box>文本、HTML</my-box> 中的文本、HTML添加到<my-box></my-box> 组件中并展示

解决的问题：如果不使用插槽，在引用的组件中书写文本、HTML并不会添加到组件中，如：<my-box>你好</my-box> ，“你好”并不会添加到<my-box>组件中、tap切换时某个固定文本框展示不同的内容等其它问题

功能点：

后备内容：即默认内容，当父组件中不提供任何内容时，默认使用后备内容；若父组件提供内容则会替换掉后备内容

具名插槽：即给插槽设置名称，使用时根据 <slot name="插槽名称" />中的name来指定使用哪个插槽

作用域插槽：即父组件引用子组件数据

动态插槽名：即插槽名称为变量

作用：如下图

1、后备内容：

示例：

功能：后备内容可以是文本、元素、组件。

2、具名插槽：

示例：

功能：通过插槽名称使用对应的插槽

具名插槽命名：v-slot:具名插槽名简写：#具名插槽（如下：#slotOne 可以写成 v-slot:slotOne ）；插槽名称自定义

使用：<slot name="定义的插槽名称"><slot>

3、作用域插槽

示例：

功能：插槽内容使用子组件数据

插槽prop命名（插槽数据）：v-bind:list="插槽prop名称" 简写 :list= "插槽prop名称"

使用：<template v-slot="插槽prop名称" />{{ 插槽prop名称.list.slotOne }} 简写：解构插槽prop <template v-slot=" { list } " />{{ list.slotOne }}

4、动态插槽名、同样slot 中name使用具体插槽名也可以是动态

5、综合示例

实现功能：点击不同的 tap，展示对应的内容、tap添加class

示例图：

创建helloworld组件、 box父组件、首页、热点、我的组件

HelloWorld组件：最外层组件

SlotBox组件：包裹tap和切换内容组件

SlotOne、SlotTwo、SlotThree内容组件

<template>
  <div>
    <h3 v-text="content"></h3>
  </div>
</template>

<script>
export default {
  data () {
    return {
      content: 'SlotOne'
    }
  }
}
</script>

SlotOne代码

SlotBox代码

<template>
<div>
<!-- 插槽 -->
    <SlotBox>

      <template #[activeName]="{ list }">  <!-- { list } 解构插槽prop-->
        {{ list.slotOne }}
        <SlotOne></SlotOne>
      </template>

      <template #slotTwo="{ list: name }">   <!-- {list: name} 将插槽prop重命名为 name -->
        {{ name.slotTwo }}
        <SlotTwo></SlotTwo>
      </template>

      <template #slotThree="{ list }">
        {{ list.slotThree }}
        <SlotThree></SlotThree>
      </template>

    </SlotBox>
</div>
</template>

HelloWorld代码