vue中三種不同插槽使用小結

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

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

插槽：

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

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

三種分類：默認插槽、具名插槽、作用域插槽

使用方式：

1.默認插槽：

父組件中：

        <Son>
           <div>html結構1</div>
        </Son>

子組件中：

        <template>
            <div>
               <!-- 定義插槽 -->
               <slot>插槽默認內容...</slot>
            </div>
        </template>

2.具名插槽：

父組件中：

? ? ? ? <Son>
? ? ? ? ? ? <template slot="center">
? ? ? ? ? ? ? <div>html結構1</div>
? ? ? ? ? ? </template>
? ? ? ? ? ? <template v-slot:footer>
? ? ? ? ? ? ? ?<div>html結構2</div>
? ? ? ? ? ? </template>
? ? ? ? </Son>

子組件中：

        <template>
            <div>
               <!-- 定義插槽 -->
               <slot name="center">插槽默認內容...</slot>
               <slot name="footer">插槽默認內容...</slot>
            </div>
        </template>

3.作用域插槽：

理解：數(shù)據(jù)在組件的自身，但根據(jù)數(shù)據(jù)生成的結構需要組件的使用者來決定。（games數(shù)據(jù)在Category組件中，但使用數(shù)據(jù)所遍歷出來的結構由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標題 -->
?? ??? ??? ??? ?<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:['紅色警戒','穿越火線','勁舞團','超級瑪麗']
                    }
                },
            }
        </script>

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

您可能感興趣的文章: