vue插槽slot

1.匿名插槽(默认插槽)

匿名插槽使用

//子组件 abouts
```js
<div>
    <slot></slot>
</div>
//父组件使用子组件abouts
// 写法1
<abouts>
  <div>我是子组件默认插槽的内容</div>
</abouts>

// 写法2
<abouts v-slot:default>
  <div>我是子组件默认插槽的内容</div>
</abouts>

匿名插槽使用子组件的数据

• 通过slot标签的属性绑定实现
• 在子组件使用时通过v-slot:default="abc’拿到

子组件 abouts
<div>
    <slot :item="title"></slot>
</div>

父组件
<abouts v-slot:default="abc">
  <div>{{abc.item}}</div>
</abouts>

2.具名插槽

具名插槽使用

• 使用具名插槽只有template标签有v-slot属性

// 子组件 abouts
<div>
    <slot name="slots">132132</slot>
</div>

// 父组件使用子组件abouts
<abouts>
  <template v-slot:slots>
  我是子组件具名插槽的内容
  </template>
</abouts>

具名插槽使用子组件的数据

• 通过slot标签的属性绑定实现
• 在子组件使用时通过v-slot:default="slots’拿到

// 子组件 
 <div>
    <slot name="slots" :item = 'title'>132132</slot>
</div>

// 父组件使用子组件abouts
<abouts>
    <template v-slot:slots="slots">slot abouts{{slots.item}}
    </template>
</abouts>

3.动态插槽名

• v-slot:[dynamicSlotName]

<abouts>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
</abouts>

注: v-slot: 可以简写为#