插槽用法

敬你春风野马

2020-02-10 158 阅读1分钟

插槽

匿名插槽

// comp1 
<div><slot></slot> </div>
// parent 
<comp>hello</comp>

具名插槽

// comp2 
<div>
    <slot></slot> 
    <slot name="content"></slot>
</div> 
// parent 
<Comp2> 
<!-- 默认插槽用default做参数 -->
<template v-slot:default>具名插槽</template>
<!-- 具名插槽用插槽名做参数 -->
<template v-slot:content>内容...</template>
</Comp2>

用户域插槽

 // comp3 
 <div>
    <slot :foo="foo"></slot>
 </div>
 // parent 
 <Comp3>
     <!-- 把v-slot的值指定为作用域上下文对象 --> 
     <template v-slot:default="ctx">
     来自子组件数据：{{ctx.foo}}
     </template>
 </Comp3>