前端架构vue架构插槽slot使用教程

1、直接使用

新建组件 Article

新建 Learn,并在 Learn 中使用 Article

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


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

运行效果

前端架构vue架构插槽slot使用教程_第1张图片

2、设置默认值

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

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

先看不设置默认值的情况

Article 内容

Learn 内容


运行效果

前端架构vue架构插槽slot使用教程_第2张图片

设置默认值

Article 内容

Learn 内容


运行效果

前端架构vue架构插槽slot使用教程_第3张图片

3、多个 slot 用法

 Article 内容

Learn 内容


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

运行效果

前端架构vue架构插槽slot使用教程_第4张图片

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


4、作用域插槽

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

Article 内容


Learn 内容


运行效果

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

前端架构vue架构插槽slot使用教程_第5张图片

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

简写后的代码


解构插槽 Prop

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

代码如下


5、动态插槽名

Article 内容

Learn 内容


运行效果

前端架构vue架构插槽slot使用教程_第6张图片

以上就是前端架构vue架构插槽slot使用教程的详细内容,更多关于vue插槽slot教程的资料请关注脚本之家其它相关文章!

你可能感兴趣的:(前端架构vue架构插槽slot使用教程)