v-slot

v-slot 是 Vue.js 2.6.0 新增的语法，用于取代之前的 slot-scope。它是用于更好的管理具名插槽的API。

使用 v-slot 可以在父组件中使用子组件中的插槽，并且可以更加灵活地管理插槽内容。

示范

以下是一个简单的 v-slot 示例，用于在主应用程序中渲染一个头部和主体内容：

<template>
  <app-layout>
    <template v-slot:header>
      <h1>这里是我的网站名称</h1>
    </template>

    <p>这里是网站的正文内容。</p>
    <p>这里是第二段正文内容。</p>
  </app-layout>
</template>

<app-layout>
  <header>
    <slot name="header"></slot>
  </header>

  <main>
    <slot></slot>
  </main>
</app-layout>

在上述示例中，父组件是 app-layout，包含一个命名为 header 的插槽和一个默认的插槽。

在父组件中，我们可以使用 v-slot 来获取子组件中的插槽内容，并将其放到指定位置。在此示例中，我们将 h1 元素从子组件移到了父组件的 v-slot 表达式中。

在多个插槽上使用 v-slot

如果你的组件中同时有多个命名插槽，你可以通过传入 slot 名称来定义 v-slot，例如：

<base-layout>
  <template v-slot:header>
    <h1>这里是我的网站名称</h1>
  </template>

  <template v-slot:body>
    <p>这里是我的网站正文</p>
    <p>还有一些更多的正文</p>
  </template>

  <template v-slot:footer>
    <p>这里是一个有趣的页脚文本</p>
  </template>
</base-layout>

<base-layout>
  <header>
    <slot name="header"></slot>
  </header>

  <main>
    <slot name="body"></slot>
  </main>

  <footer>
    <slot name="footer"></slot>
  </footer>
</base-layout>

通过变量传递插槽

有时，我们需要动态地向插槽中传递数据。在这种情况下，我们可以通过在插槽名称前加上 v-slot:...，并传递变量来实现。

例如：

<my-awesome-component>
  <template v-slot:[dynamicSlotName]>
    <p>{{ dynamicSlotContent }}</p>
  </template>
</my-awesome-component>

在上述示例中，我们传递了一个动态的 slot 名称以及一个名为 dynamicSlotContent 的变量。

在组件中，我们需要使用 slot-scope 来获取变量名：

<template>
  <div>
    <slot :name="dynamicSlotName" v-bind="slotProps"></slot>
  </div>
</template>

<script>
  export default {
    props: ['dynamicSlotName'],
    computed: {
      slotProps() {
        return {
          dynamicSlotContent: this.dynamicSlotContent
        }
      }
    },
    data() {
      return {
        dynamicSlotContent: '这里是一个动态插槽！'
      }
    }
  }
</script>

在上述代码中，我们使用 :name="dynamicSlotName" 获得传递的 slot 名称，然后使用计算属性 slotProps 将 dynamicSlotContent 传递给插槽。

最后，我们使用 v-bind 将 slotProps 绑定到插槽上，以便在父组件中使用。

总结

v-slot 是一个强大而灵活的 API，可用于更好地管理具名插槽。使用 v-slot 可以更好地控制插槽内容，并在需要时动态地传递一些变量。