快捷導(dǎo)航

vue中三種不同插槽使用小結(jié)

更新時(shí)間：2023年07月23日 11:50:59 作者：夏天T

本文主要介紹了vue中三種不同插槽使用小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

插槽：

插槽的概念：插槽就是子組件中的提供給父組件使用的一個(gè)占位符，用表示，父組件可以在這個(gè)占位符中填充任何模板代碼，如 HTML、組件等，填充的內(nèi)容會(huì)替換子組件的標(biāo)簽。簡單理解就是子組件中留下個(gè)“坑”，父組件可以使用指定內(nèi)容來補(bǔ)“坑”。

作用：讓父組件可以向子組件指定位置插入html結(jié)構(gòu)，也是一種組件間通信的方式，適用于父組件 ===> 子組件。

三種分類：默認(rèn)插槽、具名插槽、作用域插槽

使用方式：

1.默認(rèn)插槽：

父組件中：

        <Son>
           <div>html結(jié)構(gòu)1</div>
        </Son>

子組件中：

        <template>
            <div>
               <!-- 定義插槽 -->
               <slot>插槽默認(rèn)內(nèi)容...</slot>
            </div>
        </template>

2.具名插槽：

父組件中：

? ? ? ? <Son>
? ? ? ? ? ? <template slot="center">
? ? ? ? ? ? ? <div>html結(jié)構(gòu)1</div>
? ? ? ? ? ? </template>
? ? ? ? ? ? <template v-slot:footer>
? ? ? ? ? ? ? ?<div>html結(jié)構(gòu)2</div>
? ? ? ? ? ? </template>
? ? ? ? </Son>

子組件中：

        <template>
            <div>
               <!-- 定義插槽 -->
               <slot name="center">插槽默認(rèn)內(nèi)容...</slot>
               <slot name="footer">插槽默認(rèn)內(nèi)容...</slot>
            </div>
        </template>

3.作用域插槽：

理解：數(shù)據(jù)在組件的自身，但根據(jù)數(shù)據(jù)生成的結(jié)構(gòu)需要組件的使用者來決定。（games數(shù)據(jù)在Category組件中，但使用數(shù)據(jù)所遍歷出來的結(jié)構(gòu)由App組件決定）

具體編碼：

父組件中：

?? ??? ?<Son>
?? ??? ??? ?<template scope="scopeData">
?? ??? ??? ??? ?<!-- 生成的是ul列表 -->
?? ??? ??? ??? ?<ul>
?? ??? ??? ??? ??? ?<li v-for="g in scopeData.games" :key="g">{{g}}</li>
?? ??? ??? ??? ?</ul>
?? ??? ??? ?</template>
?? ??? ?</Son>
?? ??? ?<Son>
?? ??? ??? ?<template slot-scope="scopeData">
?? ??? ??? ??? ?<!-- 生成的是h4標(biāo)題 -->
?? ??? ??? ??? ?<h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
?? ??? ??? ?</template>
?? ??? ?</Son>

子組件中：

        <template>
            <div>
                <slot :games="games"></slot>
            </div>
        </template>
        <script>
            export default {
                name:'Son',
                props:['title'],
                //數(shù)據(jù)在子組件自身
                data() {
                    return {
                        games:['紅色警戒','穿越火線','勁舞團(tuán)','超級(jí)瑪麗']
                    }
                },
            }
        </script>

到此這篇關(guān)于vue中三種不同插槽使用小結(jié)的文章就介紹到這了,更多相關(guān)vue 插槽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: