前端架构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 位置
运行效果
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教程的资料请关注脚本之家其它相关文章！