v-slot插槽,vue slot嵌套
这篇文章主要为大家介绍了前端某视频剪辑软件架构插槽狭槽使用教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
目录
1、直接使用2、设置默认值3、多个狭槽用法4、作用域插槽5、动态插槽名
1、直接使用
新建组件文章
模板
差异
日期：2022-01-15
插槽/插槽
/div
/模板
新建学习，并在学习中使用文章
Learn.vue和文章。某视频剪辑软件在同一文件夹下
模板
差异
文章
差异送郎八月到扬州，长夜孤眠在画楼。女子拆开不成好，秋心合着却成愁/div
/文章
/div
/模板
脚本
从导入文章 Article.vue
导出默认值{
组件：{Article}
}
/脚本
狭槽相当于把差异插入到文章中狭槽位置
运行效果
2、设置默认值
即使用狭槽时，不传入会显示默认的内容，传入则使用传入的内容
如不设置默认值，则不显示任何内容，代码如下
先看不设置默认值的情况
文章内容
模板
差异
日期：2022-01-15
插槽/插槽
/div
/模板
学习内容
模板
差异
文章
/文章
/div
/模板
脚本
从导入文章 Article.vue
导出默认值{
组件：{Article}
}
/脚本
运行效果
设置默认值
文章内容
模板
差异
日期：2022-01-15
狭槽
差异醉眠芳树下，半被落花埋/div
/插槽
/div
/模板
学习内容
模板
差异
文章
/文章
/div
/模板
脚本
从导入文章 Article.vue
导出默认值{
组件：{Article}
}
/脚本
运行效果
3、多个 slot 用法
文章内容
模板
差异
插槽名称=标题/插槽
日期：2022-01-15
槽名=内容/槽
/div
/模板
学习内容
模板
差异
文章
模板v型槽：标题
差异窗前【作者】赵崇嶓/div
/模板
模板v型槽：内容
差异
窗前寻丈地，种得一株梅。
明月清风我，红尘不复来。
/div
/模板
/文章
/div
/模板
脚本
从导入文章 Article.vue
导出默认值{
组件：{Article}
}
/脚本
通过给狭槽标签设置名字属性值，并通过v形槽来对应
运行效果
v型槽：标题可以简写为#标题，代码如下
模板
差异
文章
模板#标题
差异窗前【作者】赵崇嶓/div
/模板
模板#内容
差异
窗前寻丈地，种得一株梅。
明月清风我，红尘不复来。
/div
/模板
/文章
/div
/模板
脚本
从导入文章 Article.vue
导出默认值{
组件：{Article}
}
/脚本
4、作用域插槽
父级插槽使用子组件中的数据
文章内容
模板
差异
日期：2022-01-15
插槽v-bind:article=article
div{{article.content1}}/div
/插槽
/div
/模板
脚本
导出默认值{
data() {
返回{
文章：{
内容1:从别后，忆相逢。几回魂梦与君同，
内容2:今宵剩把银釭照，犹恐相逢是梦中
}
}
}
}
/脚本
学习内容
模板
差异
文章
/文章
文章
模板v-slot:default=slotProps
{{ slotProps.article.content2 }}
/模板
/文章
/div
/模板
脚本
从导入文章 Article.vue
导出默认值{
组件：{Article}
}
/脚本
运行效果
看上下2个文章显示的区别，上边显示的是内容1,下边显示的是内容2
上面代码v-slot:default=slotProps 可以简写成v-slot=slotProps
简写后的代码
模板
差异
文章
/文章
文章
模板v-slot=slotProps
{{ slotProps.article.content2 }}
/模板
/文章
/div
/模板
脚本
从导入文章 Article.vue
导出默认值{
组件：{Article}
}
/脚本
解构插槽支柱
在支持的环境下（单文件组件或现代浏览器),可以使用ES2015解构传入具体的插槽支柱
代码如下
模板
差异
文章
/文章
文章
模板虚拟插槽="{ article } "
{{ article.content2 }}
/模板
/文章
/div
/模板
脚本
从导入文章 Article.vue
导出默认值{
组件：{Article}
}
/脚本
5、动态插槽名
文章内容
模板
差异
插槽名称=标题/插槽
日期：2022-01-15
槽名=内容/槽
/div
/模板
学习内容
模板
差异
文章
模板v插槽：[动态插槽名称]
差异身无彩凤双飞翼，心有灵犀一点通/div
/模板
/文章
button @ click= changeSlotName 改变插槽名/按钮
/div
/模板
脚本
从导入文章 Article.vue
导出默认值{
组件：{Article}，
data() {
返回{
动态快照名称："标题"
}
},
方法：{
changelotname(){
this.dynamicSlotName=content
}
}
}
/脚本
运行效果
以上就是前端架构某视频剪辑软件架构插槽狭槽使用教程的详细内容，更多关于某视频剪辑软件插槽狭槽教程的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。