vue架构插槽slot如何使用

发布时间:2022-02-21 09:46:00 作者:iii
来源:亿速云 阅读:134

这篇文章主要介绍了vue架构插槽slot如何使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇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 位置

运行效果

vue架构插槽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>

运行效果

vue架构插槽slot如何使用

设置默认值

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>

运行效果

vue架构插槽slot如何使用

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 来对应

运行效果

vue架构插槽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

vue架构插槽slot如何使用

上面代码 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架构插槽slot如何使用”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. vue插槽slot的使用示例
  2. slot插槽怎么在vue中使用

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue slot

上一篇:前端vue3的setup如何使用

下一篇:HTML中如何打开编辑.html文件

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》