前端架構(gòu)vue架構(gòu)插槽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 相當(dāng)于把 div 插入到 Article 中 slot 位置
運行效果
2、設(shè)置默認(rèn)值
即使用 slot 時,不傳入會顯示默認(rèn)的內(nèi)容,傳入則使用傳入的內(nèi)容
如不設(shè)置默認(rèn)值,則不顯示任何內(nèi)容,代碼如下
先看不設(shè)置默認(rèn)值的情況
Article 內(nèi)容
<template> <div> 日期:2022-01-15 <slot></slot> </div> </template>
Learn 內(nèi)容
<template> <div> <Article> </Article> </div> </template> <script> import Article from './Article.vue' export default { components: {Article} } </script>
運行效果
設(shè)置默認(rèn)值
Article 內(nèi)容
<template> <div> 日期:2022-01-15 <slot> <div>醉眠芳樹下,半被落花埋</div> </slot> </div> </template>
Learn 內(nèi)容
<template> <div> <Article> </Article> </div> </template> <script> import Article from './Article.vue' export default { components: {Article} } </script>
運行效果
3、多個 slot 用法
Article 內(nèi)容
<template> <div> <slot name="title"></slot> 日期:2022-01-15 <slot name="content"></slot> </div> </template>
Learn 內(nèi)容
<template> <div> <Article> <template v-slot:title> <div>窗前 【作者】趙崇嶓 </div> </template> <template v-slot:content> <div> 窗前尋丈地,種得一株梅。 明月清風(fēng)我,紅塵不復(fù)來。 </div> </template> </Article> </div> </template> <script> import Article from './Article.vue' export default { components: {Article} } </script>
通過給 slot 標(biāo)簽設(shè)置 name 屬性值,并通過 v-slot 來對應(yīng)
運行效果
v-slot:title 可以簡寫為 #title,代碼如下
<template> <div> <Article> <template #title> <div>窗前 【作者】趙崇嶓 </div> </template> <template #content> <div> 窗前尋丈地,種得一株梅。 明月清風(fēng)我,紅塵不復(fù)來。 </div> </template> </Article> </div> </template> <script> import Article from './Article.vue' export default { components: {Article} } </script>
4、作用域插槽
父級插槽使用子組件中的數(shù)據(jù)
Article 內(nèi)容
<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 內(nèi)容
<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 顯示的區(qū)別,上邊顯示的是 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>
解構(gòu)插槽 Prop
在支持的環(huán)境下 (單文件組件或現(xiàn)代瀏覽器),可以使用 ES2015 解構(gòu)傳入具體的插槽 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、動態(tài)插槽名
Article 內(nèi)容
<template> <div> <slot name="title"></slot> 日期:2022-01-15 <slot name="content"></slot> </div> </template>
Learn 內(nèi)容
<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>
運行效果
以上就是前端架構(gòu)vue架構(gòu)插槽slot使用教程的詳細(xì)內(nèi)容,更多關(guān)于vue插槽slot教程的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue實現(xiàn)移動端可拖拽式icon圖標(biāo)
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)移動端可拖拽式icon圖標(biāo),文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-03-03vue左右側(cè)聯(lián)動滾動的實現(xiàn)代碼
這篇文章主要介紹了vue左右側(cè)聯(lián)動滾動的實現(xiàn)代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-06-06vue-router配合ElementUI實現(xiàn)導(dǎo)航的實例
下面小編就為大家分享一篇vue-router配合ElementUI實現(xiàn)導(dǎo)航的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02Vue中使用addEventListener添加事件、removeEventListener移除事件的示例詳解
最近在項目中需要用到addEventListener監(jiān)聽滾動條滾動的高度,所以就研究了一下在vue中是怎么進(jìn)行事件監(jiān)聽的,添加事件和移除事件結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2022-12-12