008-slot插槽

插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。
简单理解就是子组件中留下个“坑”，父组件可以使用指定内容来补“坑”。

1、插槽 slot 的简单使用

app.vue 文件引入 Son.vue 组件：

<template>
  <div id="app">
    app component
    <Son>
      <div class="slot-contant">插槽内容</div>
    </Son>
  </div>
</template>

<script>
import Son from './components/SlotComponents/Son'
export default {
  name: 'App',
  components: { Son }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #4a90e2;
  color: #fff;
  padding: 20px;
}
.slot-contant {
  color: #f00;
  font-size: 16px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Son.vue文件内容：

<template>
  <div class="son-component">
    son header
    <slot />
    son footer
  </div>
</template>
<script>
export default {}
</script>
<style scoped>
.son-component {
  width: 200px;
  height: 200px;
  padding: 20px;
  background: #ccc;
  border: 1px solid #ccc;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

页面展示效果：

2、插槽分类

2.1 默认插槽

<slot />
1

2.2 具名插槽