1.插槽描述

插槽是 Vue 提出来的一个概念，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制.

2.插槽分类

插槽分为三种：
默认插槽
具名插槽
作用域插槽

3.插槽默认用法

使用语法

<slot></slot>

使用实例

在子组件中，可以定义多个默认插槽，并在子组件中决定这些默认插槽的位置，父组件要插入的内容，都会被填充到这些默认的插槽中：

<template>
  <div class="pageItemBody">
    <div class="itemMain" :class="{itemMain2:!title}">
      <slot></slot>
      <slot></slot>
    </div>
    <bg></bg>
  </div>
</template>

<pageItem title="总销售额">
    多动多动
</pageItem>

父组件定义要插入到子组件插槽的内容，可以是一个组件，也可以是普通的数据结构，只要子组件有定义插槽，就会把内容填充进去。

4.具名插槽用法

描述

子组件中定义插槽时，给对应的插槽分别起个名字，方便后边插入父组件将根据name来填充对应的内容。

使用语法

<slot name='插槽名称'></slot>

使用实例

定义插槽

子组件中定义了两个插槽，一个默认的插槽，一个指定了名称的插槽。

<template>
  <div class="pageItemBody">
    <itemTitle :title="title">
      <slot name="titleRight"></slot>
    </itemTitle>
    <div class="itemMain" :class="{itemMain2:!title}">
      <slot></slot>
    </div>
    <bg></bg>
  </div>
</template>

使用插槽

父组件用使用插槽，父组件中给titleRight插槽插入了一个tab组件，在默认插槽中插入了文字

<pageItem title="总销售额">
    <template v-slot:titleRight>
      <tab></tab>
    </template>
    <slot>多动多动</slot>
</pageItem>

渲染完成后，如下图：

定义多个重名插槽

可以定义多个重名的插槽，这里我们子组件定义了2个同名的插槽，在父组件用使用这个重名的插槽，因为子组件定义了2次，所以渲染后也会出现2次。

  <div class="pageItemBody">
    <itemTitle :title="title">
      <slot name="titleRight"></slot>
    </itemTitle>
    <div class="itemMain" :class="{itemMain2:!title}">
      <slot></slot>
      <slot name="chacao"></slot>
      <slot name="chacao"></slot>
    </div>
    <bg></bg>
  </div>

<pageItem title="总销售额">
    <template v-slot:titleRight>
      <tab></tab>
    </template>
    <template v-slot:chacao>
      12333
    </template>
    <slot>多动多动</slot>
</pageItem>

缩写

把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:chacao 可以被重写为 #chacao。

<template #chacao>
  12333
</template>

5 作用域插槽

作用域插槽就是在子组件自行决定自己要显示的内容

语法

<slot :自定义的name=data中的属性或对象></slot>

单插槽实例

子组件

<template>
  <div class="titleInfo" v-if="title">
    <h3>{{ title }}</h3>
    <div class="slot">
<!--      <slot></slot>-->
      <slot :obj="obj"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "itemTitle",
  data() {
    return {
      obj: {
        name: 'children1'
      }
    }
  },
  props: {
    title: {
      type: String,
      default() {
        return '';
      }
    },
  },
}
</script>

父组件

    <itemTitle :title="title" v-slot="slotProps">
      <p>插槽{{slotProps.obj.name}}</p>
    </itemTitle>

多插槽实例

子组件

<template>
  <div class="titleInfo" v-if="title">
    <h3>{{ title }}</h3>
    <div class="slot">
      <!--      <slot></slot>-->
      <slot name="chacao1" :obj="obj"></slot>
      <slot name="chacao2" :obj2="obj2"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "itemTitle",
  data() {
    return {
      obj: {
        name: 'children1'
      },
      obj2: {
        name: 'children2'
      },
    }
  },
  props: {
    title: {
      type: String,
      default() {
        return '';
      }
    },
  },
}
</script>

父组件

    <itemTitle :title="title">
      <!--      <slot name="titleRight"></slot>-->
      <template v-slot:chacao1="slotProps">
        <h2>{{ slotProps.obj.name }}</h2>
      </template>
      <template v-slot:chacao2="twoSlotProps">
        <h2>{{ twoSlotProps.obj2.name }}</h2>
      </template>
    </itemTitle>

6. 动态插槽名

动态插槽名

使用动态参数定义动态的插槽名

实例

子组件

<template>
  <div class="titleInfo" v-if="title">
    <h3>{{ title }}</h3>
    <div class="slot">
      <!--      <slot></slot>-->
      <slot name="chacao1" :obj="obj"></slot>
      <slot name="chacao2" :obj2="obj2"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "itemTitle",
  data() {
    return {
      obj: {
        name: 'children1'
      },
      obj2: {
        name: 'children2'
      },
    }
  },
  props: {
    title: {
      type: String,
      default() {
        return '';
      }
    },
  },
}
</script>

<template v-slot:[soltName]="slotProps">
<h2>{{ slotProps.obj.name }}</h2>
</template>

  data() {
    return {
      soltName: 'chacao1'
    }
  },