之前看vue官方文档，对slot插槽分发理解模糊，最近项目中使用了slot，便梳理总结了一下，如下为我的理解：
一般vue的slot用法有两种，一种是单独使用，一种是具名solt
1.单独使用：
如下，如果子组件中没有使用slot,则父组件中的文本不会显示：
父组件代码：
<template>
<div class="home">
我是父组件
<Child>我调用了子组件</Child>
</div>
</template>
<script>
import Child from "./Child.vue";
export default {
name: "Home",
components: {
Child,
},
};
</script>
子组件代码：
<template>
<div>我是子组件</div>
</template>
<script>
export default {
};
</script>
<style>
</style>
运行现象：
当子组件使用slot分发时，具体代码和现象如下：
子组件：
<template>
<div>
<div>我是子组件</div>
<slot></slot>
</div>
</template>
<script>
export default {};
</script>
<style>
</style>
运行现象：
2.具名slot
元素在子组件中定义属性name的值，与父组件中的slot值相呼应，则分发成功；否则，分发失败
如下：
父组件：
<template>
<div class="home">
我是父组件
<Child>
<div slot="header">我是头部</div>
<div slot="section">我是主体</div>
<div slot="footer">我是底部</div>
</Child>
</div>
</template>
<script>
import Child from "./Child.vue";
export default {
name: "Home",
components: {
Child,
},
};
</script>
子组件：
<template>
<div>
<div>我是子组件</div>
<slot name="header"></slot>
<slot name="section"></slot>
<slot name="footer"></slot>
</div>
</template>
<script>
export default {};
</script>
<style>
</style>
运行现象：
这里说一下多个具名插槽的使用 多个具名插槽，插槽的位置不是使用插槽的位置而定的，是在定义的时候的位置来替换的
使用场景
-
通过插槽可以让用户可以拓展组件，去更好地复用组件和对其做定制化处理
-
如果父组件在使用到一个复用组件的时候，获取这个组件在不同地方有少量的更改，如果去重写组件是一件不明智的事情
-
通过slot插槽向组件内部指定位置传递内容，完成这个复用组件在不同场景的应用
-
比如布局组件、表格列、下拉选、弹框显示内容等
