vue架構(gòu)插槽slot如何使用

這篇文章主要介紹了vue架構(gòu)插槽slot如何使用的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇vue架構(gòu)插槽slot如何使用文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

1、直接使用

新建組件 Article

<template>
    <div>
        日期:2022-01-15
        <slot></slot>
    </div>
</template>

新建 Learn，并在 Learn 中使用 Article

Learn.vue 和 Article.vue 在同一文件夾下

<template>
    <div>
        <Article>
            <div>送郎八月到揚(yáng)州,長(zhǎng)夜孤眠在畫樓。女子拆開不成好,秋心合著卻成愁</div>
        </Article>
    </div>
</template>
<script>
import Article from './Article.vue'
export default {
    components: {Article}
}
</script>

slot 相當(dāng)于把 div 插入到 Article 中 slot 位置

運(yùn)行效果

2、設(shè)置默認(rèn)值

即使用 slot 時(shí)，不傳入會(huì)顯示默認(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>

運(yùn)行效果

設(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>

運(yùn)行效果

3、多個(gè) 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ù)來(lái)。
                </div>
            </template>
            
        </Article>
    </div>
</template>
<script>
import Article from './Article.vue'
export default {
    components: {Article}
}
</script>

通過(guò)給 slot 標(biāo)簽設(shè)置 name 屬性值，并通過(guò) v-slot 來(lái)對(duì)應(yīng)

運(yùn)行效果

v-slot:title 可以簡(jiǎn)寫為 #title，代碼如下

<template>
    <div>
        <Article>
            <template #title>
                <div>窗前 【作者】趙崇嶓 </div>
            </template>    
            <template #content>
                <div>
                    窗前尋丈地,種得一株梅。
                    明月清風(fēng)我,紅塵不復(fù)來(lái)。
                </div>
            </template>
            
        </Article>
    </div>
</template>
<script>
import Article from './Article.vue'
export default {
    components: {Article}
}
</script>

4、作用域插槽

父級(jí)插槽使用子組件中的數(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: '從別后，憶相逢。幾回魂夢(mèng)與君同',
                content2: '今宵剩把銀釭照，猶恐相逢是夢(mèng)中'  
            }
        }
    }
}
</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>

運(yùn)行效果

看上下2個(gè) Article 顯示的區(qū)別，上邊顯示的是 content1，下邊顯示的是 content2

上面代碼 v-slot:default="slotProps" 可以簡(jiǎn)寫成 v-slot="slotProps"

簡(jiǎn)寫后的代碼

<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、動(dòng)態(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>身無(wú)彩鳳雙飛翼,心有靈犀一點(diǎn)通</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>

運(yùn)行效果

關(guān)于“vue架構(gòu)插槽slot如何使用”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“vue架構(gòu)插槽slot如何使用”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。