# Vue2的slot

有具名插槽内容就不会显示匿名插槽的内容了。

template 相当于包过内容的块。

## 效果

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678859329359/ae58c50d-ea39-4107-a3e4-0c63b99c80ea.png align="center")

## 目录结构

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678859156405/88a542ca-4ecb-4e96-b7cb-995debbbc976.png align="center")

## `app.vue`文件引入

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678859399818/1eb71cd8-0744-4c55-bbff-84310d8e023a.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678859409379/f80a8875-bac7-4801-b895-e2dfab8dd65a.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678859490397/7e64684f-7dae-4886-8e07-f828162608b0.png align="center")

## 代码

```xml
<!-- index.vue -->
<template>
  <div class="slotswomo">
    <layout>
      <!-- 具名插槽 -->
      <template slot="header">我是header</template>
      <!-- 匿名插槽 -->
      <template>我是匿名插槽</template>
      <!-- 作用域插槽 -->
      <template v-slot="slotProps">{{ slotProps.footer }}</template>
    </layout>
  </div>
</template>
<script>
import Layout from '@/components/slotswomo/Layout'
export default {
  components: {
    Layout,
  }
}
</script>
<style>
.slotswomo {
  border: 1px solid springgreen ;
  margin-top: 40px;
}
</style>
```

```xml
<!-- Layout.vue -->
<template>
<div>
  <div>
    <slot name="header"></slot>
  </div>
  <div class="body">
    <slot></slot>
  </div>
  <div class="footer">
    <slot :footer="xx"></slot>
  </div>
</div>
</template>
<script>
export default {
  data() {
    return {
      xx: '我是底部'
    }
  }
}
</script>
```