一、知识点
1.在slot标签中通过v-bind绑定插槽可以使用的属性
<slot :user='user' :list='list'>slot</slot> 在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> ` } } }); }