前端架構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教程的資料請關註WalkonNet其它相關文章！