Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 元素作为承载分发内容的出口。

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
// 布局组件
<template>
  <div class='layout'>
    // name用于匹配插槽			slot接参
    <slot name='header' :slotProps='slotProps'>
      {{slotProps}}
    </slot>
    // 没有name默认为default
    <slot></slot>
    <slot name='footer'>
    		// 可在插槽中放入默认值，在不指定此插槽时，默认显示默认值
        这是头部插槽
    </slot>
  </div>
</template>

<script>
  export default {
    name: 'Layout'
}
</script>

<style>
</style>


// 使用插槽
<template>
  <div class='home'>
    <Layout>
    	// 用template模板v-slot指令匹配所对应的name的插槽
    	// slot
      <template v-slot:header='slotProps'>头部</template>
      // 不指定v-slot，默认defualt
      <template>主体</template>
      // 不写插槽则不会显示或显示插槽的原本默认值
			//footer
    </Layout>
  </div>
</template>

<script>
 import Layout from './Layout';
  export default {
    name: 'Home',
    components: {
      Layout,
    },
    data() {
    	return {
      	slotProps: '123'
      }
    },
}
</script>

<style>
</style>