三分钟带你弄懂slot插槽——vue进阶

一、概述

当然，你可以先看完例子之后再回来看概述或者官方文档

程序员之死

在项目的开发中，代码冗余一直是程序员头疼的事情

小白程序员必会遇到的情况之一，就是写一个大项目，然后无限的 ctrl+c 和 ctrl-v，到差不多项目DDL了，甲方告诉你要改这个地方，要改那个地方，然后你就又一波 ctrl+c 和 ctrl-v

当你搞完这30几次的 ctrl+c 和 ctrl-v后，啊……这……什么鬼，报错了

当你改完bug之后，甲方：“改回去吧，我不要了”

这时，怎一个艹字头了的，当场升天的心都有了

这个时候，组件就显得尤为重要

使用好 “slot插槽” 能够让你再使用组件的时候更游刃有余

什么是 slot插槽？

我是这么理解的：

slot定义在子组件中，slot中的内容权重为1
在父组件中，权重为10

也就是说：如果父组件中没有内容去“替换”子组件的slot，那么默认渲染出子组件中的内容

<!--子组件 mytemplate 中-->
<template><slot>header</slot>
</template><!--父组件1中-->
<mytemplate></mytemplate><!--父组件2中-->
<mytemplate>change header
</mytemplate>

这样，父组件1中显示为 header，父组件2中显示为 change header

2.6.0 版本中的 slot

在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。
它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。

二、具名插槽

在2.6.0中，已经使用 name 和 v-slot 进行搭配了，不填name默认为 name = “default”

例子

下面我用一个例子来帮助大家理解 slot插槽

效果图

帮大家捋一下思路：

子组件由title、img、content三部分组成，我们要做的效果就是左边放默认的子组件效果，右边的替换掉插槽，用上我们在父组件中定义内容

子组件定义三个具名插槽（要是不定义name的话，全部默认为defult就会出事了）然后再父组件中，用 v-slot：[名字] 来替换默认插槽

代码

Slot-Component.vue

<!--这是作图的默认效果，在子组件中-->
<template><div class="container"><strong><slot name="slot-title">title</slot></strong><slot name="slot-img"><img src="http://localhost:9999/img/1.png" alt /></slot><p style="color:#666"><slot name="slot-content">content</slot></p></div>
</template><style scoped>
* {padding: 0;background: 0;margin: 0;
}
.container {width: 200px;height: 200px;overflow: hidden;background: #f0f0f0;border: 0.5rem solid #999;margin: 1rem;
}
.container strong {display: block;height: 2rem;line-height: 2rem;
}
.container p {height: 2rem;line-height: 2rem;
}
.container img {height: calc(100% - 4rem);
}
</style>

Father.vue

<template><div class="container"><slotComponent class="margin-auto"></slotComponent><slotComponent class="margin-auto"><template v-slot:slot-title>mytitle</template><template v-slot:slot-img><img src="http://localhost:9999/img/2.png" alt /></template><template v-slot:slot-content>mycontent</template></slotComponent></div>
</template><script>
import slotComponent from "../components/Slot-Component";
export default {components: { slotComponent }
};
</script><style scoped>
.margin-auto {display: inline-block;
}
</style>

三、小惊喜

slot插槽中，< slot >标签是定义不了样式了，行内样式也不行！为什么呢？请按F12查看一下是否还有< slot >标签的存在。