前端架构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教程的资料请关注其它相关文章！