v-slot只能是template元素上，有一种额外情况 独占默认插槽
//父组件 <template> <item > <template v-slot:default> // v-slot:default可以不加,只能定义在template上 <div>牛奶</div> </template> <item> </template> //item子组件 <template> <div> <slot ></slot>//默认插槽 <h1>杯子 </h1> </div> </template>具名插槽
//父组件 <template> <div> <layout> <template v-slot:header>//v-slot指令使用插槽 <div >头部标题</div> </template> <div >显示的默认内容</div> <!--或者 <template v-slot:default> <div >显示的默认内容</div> </template> --> <template v-slot:footer> <div >尾部</div> </template> </layout> </div> </template> //子组件 <template> <div> <layout> <h1>layout子组件</h1> <slot name="header"></slot> //这种就叫具名插槽 <slot></slot> //如果不指定名字，就会将模板中未匹配到的内容渲染到默认插槽中，这里为显示的内容 <slot name="footer"></slot> </layout> </div> </template>这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data 属性 attributeName，其值为 “header”，那么这个绑定将等价于 v-slot:header。
<layout> <template v-slot:[attributeName]> ... </template> </layout>2.6后插槽 可以把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header
v-slot:后面必须有值，不可写成#="{data}"
<template> <div> <cup> <template #default="msg"> <div> {{size}} </div> </template> </cup> </div> </template>