小王的学习笔记（十七）——插槽

普通插槽

插槽允许我们在调用子组件的时候为子组件传递模板

<div id="app">
        <test>
            <!-- 告诉模板传递参数到哪一个插槽中 -->
            <template v-slot:two>{{msg}}</template>
        </test>
    </div>
    <script>
        let test = {
            // 给插槽命名
            template:`<div>
                    <slot></slot>
                    <slot></slot>
            </div>`
        }
        new Vue({
            el:'#app',
            components:{
                test
            },
            data:{
                msg:'hello'
            }
        })
    </script>
    运行结果
    hello hello

具名插槽

给插槽命名，通过插槽的名字确认插入位置

<div id="app">
        <test>
            <!-- 告诉模板传递参数到哪一个插槽中 -->
            <template v-slot:two>{{msg}}</template>
            <template v-slot:one>world</template>
        </test>
    </div>
    <script>
        let test = {
            // 给插槽命名
            template:`<div>
                    <slot name="one"></slot>
               		<slot name="two"></slot>
            </div>`
        }
        new Vue({
            el:'#app',
            components:{
                test
            },
            data:{
                msg:'hello'
            }
        })
    </script>
    运行结果
    world hello

作用域插槽

<div id="app">
        <test>
           <!-- <template v-slot='aaa'>{{aaa}}</template> -->
           <!-- 解构 -->
           <template v-slot='{user,form}'>{{user}}{{form}}</template>
        </test>
    </div>
    <script>
        let test = {
            template:`<div>
                <div>
                    <slot :user='user' :form='form'></slot>
                </div>
            </div>`,
            data(){
                return{
                    form:{
                        username:'tom',
                        age:12
                    },
                    user:'zs'
                }
            }
        }
        new Vue({
            el:'#app',
            components:{
                test
            },
            data:{
                msg:'hello'
            }
        })
    </script>