vue v-slot

v-slot是Vue.js 2.6.0版本中引入的新语法，用于替代之前的slot和slot-scope特性。它的作用是在父组件中定义插槽的具体实现，使得子组件可以在插槽中访问父组件的数据和方法。下面是一个使用v-slot的例子：

<template>
  <div>
    <header>
      <slot name="header" :data="headerData"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<template>
  <base-layout>
    <template v-slot:header="slotProps">
      <h1>{{ slotProps.data.title }}</h1>
      <p>{{ slotProps.data.description }}</p>
    </template>

    <p>This is some content that goes in the main section.</p>

    <template v-slot:footer>
      <p>This is some contact information.</p>
    </template>
  </base-layout>
</template>

在上面的例子中，我们定义了一个名为base-layout的组件，它包含了三个插槽：header、default和footer。在父组件中，我们使用v-slot指令来定义每个插槽的具体实现。在header插槽中，我们使用了slotProps来访问父组件中的数据。在default和footer插槽中，我们没有传递任何数据，因此可以省略slotProps。