技術標籤：前端 Vue

插槽：
子元件中提供給父元件使用的一個佔位符，
父元件不僅可以往插槽中插入值型別，也可以插入任何模板程式碼
我們插入的程式碼，會自動替代子標籤
(白話，就是給你一個坑，父元件傳一個東西(值，其他模板程式碼)過來，我給你放在那裡)
插槽種類：

• 匿名插槽
• 具名插槽
• 作用域插槽

匿名插槽

在template中定義slot標籤，然後在div#app中就可以寫資料, 此為匿名插槽
步驟:
在元件的template中，定義插槽

    <template id="temp">
       <div>
           this is a children template
           <
 
br> 
           <slot>

           </slot>
       </div>
   </template>
   <script>
       Vue.component("rin",{
           template:"#temp"
       })        

在使用元件時,傳入對應的值即可

    <div id="app">
       <rin>
           插槽的位置，誰敢動
       </
 
rin>
   </div>

具名插槽

具名插槽就是有名字的插槽
1.在template的slot標籤中，使用name屬性定義slot名稱
2.在主標籤中對應的插槽資料中，使用v-slot指定插槽
3.具名插槽必須放在template中，並由template使用v-slot指令指定插槽
4.如果兩個插槽名稱一致，那麼可以在上端一次輸入資料，在元件中一起使用
5.插槽的位置順序，由tempalte決定。
6插槽可以有多個插槽，且可以放在不同的位置

步驟：
在template中定義slot的位置和名稱

    <template id="temp">
 

        <div>            
            <slot name="slot1"></slot>
            <p>這是元件的身體</p>
            <slot name="slot2"></slot>
        </div>
    </template>
    <script>
        Vue.component("rin", {
            template: "#temp"
        })
    </script>

使用時，使用v-slot傳遞不同的slot，並定義名稱，此處的先後順序與展示資料無關

    <div id="app">
       <rin>
           <template v-slot:slot1>
               <h1>這是插槽1的資料</h1>
           </template>

            <template v-slot:slot2> 
               <h1>這是插槽2的資料</h1>
           </template> 
       </rin>
   </div>

預設插槽

• 所謂預設插槽，就是在元件中只申明瞭插槽標籤，沒有繫結固定名稱(且一定是)。
• 此時可以在div#app標籤中，新建一個template且無v-slot指定。(也可以直接寫資料，template也不寫)
• 當在template中，寫了多個預設插槽時，預設插槽的資料會一一填充上去
• 同上，如果在div#app定義了多個插槽的資料，也會一一填充到template中

此處就是一個元件中定義了兩個預設slot

    <template id="temp">
        <div>            
            <slot name="slot1"></slot>
            <p>這是元件的身體</p>
            <slot name="slot2"></slot>
            <slot></slot>
            <slot></slot>
        </div>
    </template>
    <script>
        Vue.component("rin", {
            template: "#temp"
        })

使用的時候，預設用寫上去即可，只是不需要繫結名稱

    <div id="app">
        <rin>
            <template v-slot:slot1>
                <h1>這是插槽1的資料</h1>
            </template>

             <template v-slot:slot2> 
                <h1>這是插槽2的資料</h1>
            </template> 

            <!-- 預設插槽 -->
            <template>
                <div>哈哈哈1</div>
            </template> 
            <template>
                <div>哈哈哈2</div>
            </template> 
        </rin>
    </div>

作用域插槽

作用域插槽內，父元件可以拿到子元件的資料。子元件可以在slot標籤上繫結屬性值
理解上其實就是：作用域插槽就是帶有資料的插槽

1.定義了一個元件，且給元件定義了部分資料
一個user，一個user的list

        Vue.component("rin", {
            template: "#temp",
            data() {
                return {
                    user: {
                        name: "liubi",
                        age: 10
                    },
                    users: [{
                            name: "rin",
                            age: 24
                        },
                        {
                            name: "sister",
                            age: 10
                        },
                        {
                            name: "may",
                            age: 16
                        },
                    ]
                }
            }
        })

2.定義插槽：
在元件繫結的template中，slot使用v-for或者：加屬性名的方式繫結資料

    <template id="temp">
        <div>
            <!-- 1.因為template不支援大寫，所以定義userinfo也不能出現駱駝式命名，還必須小寫
                 2.對插槽進行命名時，若是使用-的稱呼，則tempalte中，也必須寫area-slot，否則也會無效
                  -->
            <!-- 1.傳遞物件 -->
            <slot name="area-slot" :user-info="user"></slot>
            <!-- 傳遞物件裡面的值 -->
            <slot name="area-slot1" :username="user.name" :age="user.age"></slot>
            <slot name="area-slot2" v-for="user in users" :username="user.name" :age="user.age"></slot>
        </div>
    </template>

注意:1.對插槽進行命名時，若是使用-的稱呼，則tempalte中，也必須寫area-slot，否則也會無效
2.因為template不支援大寫，所以定義userinfo也不能出現駱駝式命名，還必須小寫

3.元件中使用插槽
使用scope繫結資料，然後輸出資料內容

    <div id="app">
        <rin>
            <!-- 此處繫結slot(作用域插槽)時，不能像具名插槽一樣，使用v-slot，只能用slot來繫結slot名稱 -->
            <template slot="area-slot" slot-scope="data">
                <!-- 1.當slot的屬性user-info使用了-時，此處data的資料還必須大寫
                當然，也可以user-info直接寫成userinfo，那此處也可以寫成userinfo -->
                {{data.userInfo.name}}
            </template>
            <!-- 繫結值 -->
            <template slot="area-slot1" slot-scope="data">
                {{data.username}}--{{data.age}}
            </template>
            <!-- 遍歷物件 -->
            <template slot="area-slot2" slot-scope="data">
                <h1>{{data.username}}--{{data.age}}</h1>
            </template>
        </rin>
    </div>

注意：此處與步驟二相關聯，當步驟二定義插槽時，此處使用user-info，那麼步驟三使用插槽遍歷資料時候，還必須得使用大寫

全程式碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> -->
    <script src="vue.min.js"></script>
    <title>作用域插槽</title>
</head>

<body>
    <!-- 1.作用域插槽其實就是帶有資料的插槽 -->
    <div id="app">
        <rin>
            <!-- 此處繫結slot(作用域插槽)時，不能像具名插槽一樣，使用v-slot，只能用slot來繫結slot名稱 -->
            <template slot="area-slot" slot-scope="data">
                <!-- 1.當slot的屬性user-info使用了-時，此處data的資料還必須大寫
                當然，也可以user-info直接寫成userinfo，那此處也可以寫成userinfo -->
                {{data.userInfo.name}}
            </template>
            <!-- 繫結值 -->
            <template slot="area-slot1" slot-scope="data">
                {{data.username}}--{{data.age}}
            </template>
            <!-- 遍歷物件 -->
            <template slot="area-slot2" slot-scope="data">
                <h1>{{data.username}}--{{data.age}}</h1>
            </template>
        </rin>
    </div>
    <template id="temp">
        <div>
            <!-- 1.因為template不支援大寫，所以定義userinfo也不能出現駱駝式命名，還必須小寫
                 2.對插槽進行命名時，若是使用-的稱呼，則tempalte中，也必須寫area-slot，否則也會無效
                  -->
            <!-- 1.傳遞物件 -->
            <slot name="area-slot" :user-info="user"></slot>
            <!-- 傳遞物件裡面的值 -->
            <slot name="area-slot1" :username="user.name" :age="user.age"></slot>
            <slot name="area-slot2" v-for="user in users" :username="user.name" :age="user.age"></slot>
        </div>
    </template>
    <script>
        Vue.component("rin", {
            template: "#temp",
            data() {
                return {
                    user: {
                        name: "liubi",
                        age: 10
                    },
                    users: [{
                            name: "rin",
                            age: 24
                        },
                        {
                            name: "sister",
                            age: 10
                        },
                        {
                            name: "may",
                            age: 16
                        },
                    ]
                }
            }
        })
        var vm = new Vue({
            el: "#app",
        });
    </script>
</body>
</html>