vue中关于slot插槽的使用方法

vue插槽slot是为子组件中的父组件提供的占位符。用<slot></slot>表示，父组件可以给这个占位符内填充任何模板代码，填充的内容会自动替换<slot></slot>标签。下面web建站小编给大家简单介绍一下vue插槽的几种方法！

vue匿名插槽

子组件内放置一个插槽：

<template>
  <div>
    <slot></slot>
  </div>
</template>

父组件使用插槽：

<Header>
  <template v-slot>web建站教程 </template>
</Header>

vue作用域插槽

作用域插槽子组件内定义要传送的数据

<template>
  <div v-for="item in 10" :key="item">
    <slot :data="item" name="list"></slot>
  </div>
</template>

在调用组件的父组件内接收数据：

<SlotCom>
  <template #list="{data}">
    {{ data }}
  </template>
</SlotCom>

vue具名插槽

定义为多个插槽的组件：

<template>
   <div>
     头部： <slot name="header"></slot>
     主体： <slot></slot>
     底部： <slot name="footer">
     </slot>
   </div>
</template>

父组件填充内容需要对象插槽名：

<Com>
  <template v-slot:header>
    <div>我是header</div>
  </template>
  <template v-slot>
    <div>中间匿名插槽</div>
  </template>
  <template v-slot:footer>
    <div>我是 footer</div>
  </template>
</Com>