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

更新时间：2022年02月19日 16:59:23 作者：悟世君子

这篇文章主要为大家介绍了前端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教程的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

vue实战中的一些实用小魔法汇总
这篇文章主要给大家介绍了关于vue实战中一些实用小魔法的相关资料,这些技巧和窍门,可以帮助你成为更好的Vue开发人员,需要的朋友可以参考下
2021-06-06
解决vue-cli 配置资源引用的绝对路径问题
这篇文章主要介绍了vue-cli 配置资源引用的绝对路径的问题，本文通过图文实例相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-09-09
Ant design vue中的联动选择取消操作
这篇文章主要介绍了Ant design vue中的联动选择取消操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
Vue-router 切换组件页面时进入进出动画方法
今天小编就为大家分享一篇Vue-router 切换组件页面时进入进出动画方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue根据权限动态渲染按钮、组件等的函数式组件实现
这篇文章主要介绍了vue根据权限动态渲染按钮、组件等的函数式组件实现方式,具有很好的参考价值,希望杜大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
Vue简介、引入、命令式与声明式编程详解
原生开发和Vue开发的模式和特点,我们会发现是完全不同的,这里其实涉及到两种不同的编程范式:命令式编程和声明式编程,下面这篇文章主要给大家介绍了关于Vue简介、引入、命令式与声明式编程的相关资料,需要的朋友可以参考下
2022-10-10
解决vue项目中前后端交互的跨域问题、nginx代理配置方式
这篇文章主要介绍了解决vue项目中前后端交互的跨域问题、nginx代理配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
详解vantUI框架在vue项目中的应用踩坑
这篇文章主要介绍了详解vantUI框架在vue项目中的应用踩坑,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
vue.js从安装到搭建过程详解
这篇文章主要为大家详细介绍了vuejs从安装到搭建的整个过程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
vue中配置后端接口服务信息详解
这篇文章主要介绍了vue中配置后端接口服务信息详解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03