vue入门 vue基础之简单使用6--插槽 slot

插槽：
子组件中提供给父组件使用的一个占位符，
父组件不仅可以往插槽中插入值类型，也可以插入任何模板代码
我们插入的代码，会自动替代子标签
(白话，就是给你一个坑，父组件传一个东西(值，其他模板代码)过来，我给你放在那里)
插槽种类：

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

匿名插槽

在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>