前端架構vue架構插槽slot使用教學

2022-02-19 19:02:44

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教學的資料請關注it145.com其它相關文章！

前端架構vue架構插槽slot使用教學

目錄

1、直接使用

2、設定預設值

3、多個 slot 用法

4、作用域插槽

5、動態插槽名

熱門文章