插槽语法是vue实现的内容分发API,用于符合组件开发。该技术在通用组件库开发中有大量应用。
1.匿名插槽
子组件
<div>
<slot></slot>
</div>
父组件
<comp>hello</comp>
2.具名插槽
将内容分发到子组件指定位置
子组件
<div>
<slot name="content"></slot>
</div>
父组件
<comp>
<template v-slot:content>具名内容</template>
</comp>
3.作用域插槽
分发内容要用到子组件中的数据
子组件
<div>
<slot :foo="foo"></slot>
</div>
父组件
<comp>
<!-- 把v-slot的值指定为作用域上下文对象 -->
<template v-slot:default="slotProps"></template>
//来自子组件数据:{{slotprops.foo}}
</comp>