vue架构插槽slot如何使用

这篇文章主要介绍了vue架构插槽slot如何使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue架构插槽slot如何使用文章都会有所收获，下面我们一起来看看吧。

1、直接使用

新建组件 Article

新建 Learn，并在 Learn 中使用 Article

Learn.vue 和 Article.vue 在同一文件夹下

slot 相当于把 div 插入到 Article 中 slot 位置

运行效果

2、设置默认值

即使用 slot 时，不传入会显示默认的内容，传入则使用传入的内容

如不设置默认值，则不显示任何内容，代码如下

先看不设置默认值的情况

Article 内容

Learn 内容

运行效果

设置默认值

Article 内容

Learn 内容

运行效果

3、多个 slot 用法

Article 内容

Learn 内容

通过给 slot 标签设置 name 属性值，并通过 v-slot 来对应

运行效果

v-slot:title 可以简写为 #title，代码如下

4、作用域插槽

父级插槽使用子组件中的数据

Article 内容

Learn 内容

运行效果

看上下2个 Article 显示的区别，上边显示的是 content1，下边显示的是 content2

上面代码 v-slot:default="slotProps" 可以简写成 v-slot="slotProps"

简写后的代码

解构插槽 Prop

在支持的环境下 (单文件组件或现代浏览器)，可以使用 ES2015 解构传入具体的插槽 prop

代码如下

5、动态插槽名

Article 内容

Learn 内容

运行效果

关于"vue架构插槽slot如何使用"这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对"vue架构插槽slot如何使用"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。