vue中的作用域插槽

一、知识点

1.在slot标签中通过v-bind绑定插槽可以使用的属性

 <slot :user='user' :list='list'>slot</slot>

2. 在template标签中，使用v-slot:default=‘scope’

scope:template标签中可以使用的作用域对象
<template v-slot:default='scope'>
    {{scope.user.name}}
    {{scope.list}}
</template>

二、完整代码

html代码：
<div id="app">
       <my-div>
           <template v-slot:default='scope'>
                {{scope.user.name}} //lisi
                {{scope.list}} // [ 1, 2, 3, 4, 5 ] 
           </template>
            <template v-slot:header>
                你好
            </template> 
            <template v-slot:footer>
                slit2-----
            </template>   
       </my-div>
</div> 

js代码：
  new Vue({
        el:'#app',
        data:{},
        methods:{},
        components:{
            'my-div':{
                data(){
                    return {
                        user:{
                            name:'lisi',
                            age:20
                        },
                        list:[1,2,3,4,5]
                    }
                },
                template:`
                    <div>
                        <p><slot :user='user' :list='list'>slot</slot></p>
                        <p><slot name='header'>slot</slot></p>
                        <p><slot name='footer'>slot</slot></p>
                        <p>hello</p>
                        <p>world</p>
                    </div>
                `
            }
        }
    });
}