前端架构vue架构插槽slot使用教程
1、直接使用
新建组件 Article
<template> <div> 日期:2022-01-15 <slot></slot> </div> </template>
新建 Learn,并在 Learn 中使用 Article
Learn.vue 和 Article.vue 在同一文件夹下
<template> <div> <Article> <div>送郎八月到扬州,长夜孤眠在画楼。女子拆开不成好,秋心合着却成愁</div> </Article> </div> </template> <script> import Article from './Article.vue' export default { components: {Article} } </script>
slot 相当于把 div 插入到 Article 中 slot 位置
运行效果
2、设置默认值
即使用 slot 时,不传入会显示默认的内容,传入则使用传入的内容
如不设置默认值,则不显示任何内容,代码如下
先看不设置默认值的情况
Article 内容
<template> <div> 日期:2022-01-15 <slot></slot> </div> </template>
Learn 内容
<template> <div> <Article> </Article> </div> </template> <script> import Article from './Article.vue' export default { components: {Article} } </script>
运行效果
设置默认值
Article 内容
<template> <div> 日期:2022-01-15 <slot> <div>醉眠芳树下,半被落花埋</div> </slot> </div> </template>
Learn 内容
<template> <div> <Article> </Article> </div> </template> <script> import Article from './Article.vue' export default { components: {Article} } </script>
运行效果
3、多个 slot 用法
Article 内容
<template> <div> <slot name="title"></slot> 日期:2022-01-15 <slot name="content"></slot> </div> </template>
Learn 内容
<template> <div> <Article> <template v-slot:title> <div>窗前 【作者】赵崇嶓 </div> </template> <template v-slot:content> <div> 窗前寻丈地,种得一株梅。 明月清风我,红尘不复来。 </div> </template> </Article> </div> </template> <script> import Article from './Article.vue' export default { components: {Article} } </script>
通过给 slot 标签设置 name 属性值,并通过 v-slot 来对应
运行效果
v-slot:title 可以简写为 #title,代码如下
<template> <div> <Article> <template #title> <div>窗前 【作者】赵崇嶓 </div> </template> <template #content> <div> 窗前寻丈地,种得一株梅。 明月清风我,红尘不复来。 </div> </template> </Article> </div> </template> <script> import Article from './Article.vue' export default { components: {Article} } </script>
4、作用域插槽
父级插槽使用子组件中的数据
Article 内容
<template> <div> 日期:2022-01-15 <slot v-bind:article="article"> <div>{{article.content1}}</div> </slot> </div> </template> <script> export default { data() { return { article: { content1: '从别后,忆相逢。几回魂梦与君同', content2: '今宵剩把银釭照,犹恐相逢是梦中' } } } } </script>
Learn 内容
<template> <div> <Article> </Article> <Article> <template v-slot:default="slotProps"> {{ slotProps.article.content2 }} </template> </Article> </div> </template> <script> import Article from './Article.vue' export default { components: {Article} } </script>
运行效果
看上下2个 Article 显示的区别,上边显示的是 content1,下边显示的是 content2
上面代码 v-slot:default="slotProps" 可以简写成 v-slot="slotProps"
简写后的代码
<template> <div> <Article> </Article> <Article> <template v-slot="slotProps"> {{ slotProps.article.content2 }} </template> </Article> </div> </template> <script> import Article from './Article.vue' export default { components: {Article} } </script>
解构插槽 Prop
在支持的环境下 (单文件组件或现代浏览器),可以使用 ES2015 解构传入具体的插槽 prop
代码如下
<template> <div> <Article> </Article> <Article> <template v-slot="{article}"> {{ article.content2 }} </template> </Article> </div> </template> <script> import Article from './Article.vue' export default { components: {Article} } </script>
5、动态插槽名
Article 内容
<template> <div> <slot name="title"></slot> 日期:2022-01-15 <slot name="content"></slot> </div> </template>
Learn 内容
<template> <div> <Article> <template v-slot:[dynamicSlotName]> <div>身无彩凤双飞翼,心有灵犀一点通</div> </template> </Article> <button @click="changeSlotName">改变插槽名</button> </div> </template> <script> import Article from './Article.vue' export default { components: {Article}, data() { return { dynamicSlotName: 'title' } }, methods: { changeSlotName() { this.dynamicSlotName = 'content' } } } </script>
运行效果
以上就是前端架构vue架构插槽slot使用教程的详细内容,更多关于vue插槽slot教程的资料请关注猪先飞其它相关文章!
原文出处:https://blog.csdn.net/wsjzzcbq/article/details/122949283
相关文章
- 今天小编在这里就来给Painter的这一款软件的使用者们来说一说绘制红衣喝酒男水粉画效果的教程,各位想知道具体绘制步骤的使用者,那么下面就快来跟着小编一起看一看教程...2016-09-14
iPhone6怎么激活?两种苹果iPhone6激活教程图文详解
iPhone6新机需要激活后才可以正常使用,那么对于小白用户来说,iPhone6如何激活使用呢?针对此问题,本文就为大家分别介绍Wifi无线网络激活以及iPhone6连接电脑激活这两种有效的方法,希望本文能够帮助到大家...2022-09-14- 今天小编在这里就来给各位photoshop的这一款软件的使用者们来说下制作雨中野外孤独行走的一头牛海报的教程,各位想知道具体制作方法的使用者们,大家就快来看一看小编给...2016-09-14
- 今天小编在这里就来给Painter的这一款软件的使用者们来说一下绘制帅气卡通魔法王子漫画的具体教程,各位想知道绘制步骤的使用者,那么下面就快来跟着小编一起看一看教程...2016-09-14
- 今天小编在这里就来给各位Illustrator的这一款软件的使用者们来说说鼠绘堆雪人的孩童矢量插画的教程,各位想知道具体绘制方法的使用者们,那么各位就快来跟着小编来看看...2016-09-14
- 支付宝支付在国内算是大家了,我们到处都可以使用支付宝了,下文整理介绍的是在安卓app应用中使用支付宝进行支付的开发例子。 之前讲了一篇博客关与支付宝集成获取...2016-09-20
- 今天小编在这里就来给美图秀秀的这一款软件的使用者们来说下究竟该怎么给照片天空加蓝天白云的教程,各位想知道具体制作步骤的,那么下面就来跟着小编一起看看吧。 ...2016-09-14
- 今天小编在这里就来给llustrator的这一款软件的使用者们来说一说绘制扁平化风格卡通警察护士空姐肖像的教程,各位想知道具体绘制步骤的使用者们,那么下面就快来跟着小编...2016-09-14
- 今天小编在这里就来给Illustrator的这一款软件的使用者们来说一下绘制一个方形的录音机图标的教程,各位想知道具体绘制方法的使用者们,那么下面就来看一下小编给大家分...2016-09-14
- 今天小编在这里就来给photoshop的这一款软件的使用者们来说一说简单制作一个搞笑的换脸表情包的教程,各位想知道具体制作方法的使用者们,那么大家就快来看一看教程吧。...2016-09-14
- 今天小编在这里就来给各位photoshop的这一款软件的使用者们来说说给手绘画调色变换场景的后期教程,各位想知道具体后期处理步骤的使用者们,那么大家就快来跟着小编来看...2016-10-02
- 今天小编在这里就来给美图秀秀的这一款软件的使用者们来说一下让你胸丰满起来的处理教程,各位想知道具体处理步骤的,那么下面就快来跟着小编一起看一下教程吧。 给...2016-09-14
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 今天小编在这里就来给Painter的这一款软件的使用者们来说一下绘制雷神传插画的教程,各位想知道具体绘制步骤的使用者,那么下面就快来跟着小编一起看看绘制方法吧。 ...2016-09-14
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28