前端架構(gòu)vue架構(gòu)插槽slot使用教程

更新時間：2022年02月19日 16:59:23 作者：悟世君子

這篇文章主要為大家介紹了前端vue架構(gòu)插槽slot使用教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

1、直接使用

新建組件 Article

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

新建 Learn，并在 Learn 中使用 Article

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

<template>
    <div>
        <Article>
            <div>送郎八月到揚(yá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 時，不傳入會顯示默認(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、多個 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)

運(yùn)行效果

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>

運(yùn)行效果

看上下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>

運(yùn)行效果