MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

Vue插槽指令v-slot的功能扩展与实际开发中的使用场景

2021-06-161.9k 阅读

Vue插槽指令 v - slot 的基础回顾

在深入探讨 v - slot 的功能扩展与实际应用场景之前，先来回顾一下其基础概念。Vue 的插槽（Slots）机制是一种强大的组件间通信与内容分发方式。在 Vue 2.6.0 版本引入了 v - slot 语法糖，它是对之前 slot - scope 的升级和改进。

假设我们有一个简单的组件 BaseLayout，它定义了一个插槽，用来接收父组件传递过来的内容：

<template>
  <div class="base-layout">
    <header>
      <h1>页面标题</h1>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <p>版权所有</p>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'BaseLayout'
}
</script>

<style scoped>
.base-layout {
  border: 1px solid #ccc;
  padding: 10px;
}
</style>

在父组件中使用这个 BaseLayout 组件时，可以这样传递内容：

<template>
  <div>
    <BaseLayout>
      <p>这里是页面主体内容</p>
    </BaseLayout>
  </div>
</template>

<script>
import BaseLayout from './BaseLayout.vue'
export default {
  components: {
    BaseLayout
  }
}
</script>

这里父组件传递给 BaseLayout 的 <p>这里是页面主体内容</p> 就会填充到 BaseLayout 组件 <slot></slot> 的位置。这是插槽最基础的使用方式，也就是匿名插槽。

具名插槽与 v - slot 的使用

  1. 具名插槽基础 在实际开发中，一个组件可能需要多个不同位置的插槽，这时候就需要用到具名插槽。使用 v - slot 语法，我们可以很方便地定义和使用具名插槽。 继续以 BaseLayout 组件为例，假设我们希望在侧边栏也添加一个插槽：
<template>
  <div class="base-layout">
    <header>
      <h1>页面标题</h1>
    </header>
    <main>
      <slot name="main-content"></slot>
    </main>
    <aside>
      <slot name="sidebar"></slot>
    </aside>
    <footer>
      <p>版权所有</p>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'BaseLayout'
}
</script>

<style scoped>
.base-layout {
  border: 1px solid #ccc;
  padding: 10px;
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-gap: 10px;
}
aside {
  background-color: #f9f9f9;
  padding: 10px;
}
</style>

在父组件中使用时：

<template>
  <div>
    <BaseLayout>
      <template v - slot:main-content>
        <p>这里是主要内容</p>
      </template>
      <template v - slot:sidebar>
        <ul>
          <li>侧边栏链接 1</li>
          <li>侧边栏链接 2</li>
        </ul>
      </template>
    </BaseLayout>
  </div>
</template>

<script>
import BaseLayout from './BaseLayout.vue'
export default {
  components: {
    BaseLayout
  }
}
</script>

这里通过 v - slot:插槽名 的方式，明确地将不同内容分发到对应的插槽位置。<template> 标签在这里起到包裹内容的作用，使得代码结构更加清晰。

  1. 缩写形式 v - slot 还有一种缩写形式 #。上面的代码可以改写为：
<template>
  <div>
    <BaseLayout>
      <template #main-content>
        <p>这里是主要内容</p>
      </template>
      <template #sidebar>
        <ul>
          <li>侧边栏链接 1</li>
          <li>侧边栏链接 2</li>
        </ul>
      </template>
    </BaseLayout>
  </div>
</template>

这种缩写形式在代码书写上更加简洁，尤其是在模板内容较多的情况下，能够减少视觉干扰，提高代码的可读性。

作用域插槽与 v - slot

  1. 作用域插槽概念 作用域插槽允许父组件访问子组件插槽内的数据。这在很多实际场景中非常有用，比如列表渲染时，子组件负责数据的获取和处理，而父组件可以根据自身需求来展示这些数据。 假设我们有一个 ListComponent 组件，用于展示列表数据：
<template>
  <ul>
    <li v - for="item in list" :key="item.id">
      <slot :item="item">{{ item.name }}</slot>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    }
  }
}
</script>

在这个组件中，我们通过 :item="item" 将列表项 item 作为一个属性绑定到插槽上。这时候在父组件中使用 ListComponent 时：

<template>
  <div>
    <ListComponent>
      <template v - slot:default="slotProps">
        <span>{{ slotProps.item.name }} - 自定义展示</span>
      </template>
    </ListComponent>
  </div>
</template>

<script>
import ListComponent from './ListComponent.vue'
export default {
  components: {
    ListComponent
  }
}
</script>

这里 v - slot:default="slotProps" 中的 slotProps 就是我们在子组件插槽上绑定的数据对象，通过它可以访问到 item 属性，从而实现自定义的展示逻辑。

  1. 具名作用域插槽 当组件中有多个插槽且都需要传递不同的数据时，就会用到具名作用域插槽。 假设 ListComponent 组件扩展为有两个插槽，一个用于展示列表项，一个用于展示列表底部的统计信息：
<template>
  <div>
    <ul>
      <li v - for="item in list" :key="item.id">
        <slot name="item" :item="item">{{ item.name }}</slot>
      </li>
    </ul>
    <slot name="footer" :count="list.length"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    }
  }
}
</script>

在父组件中：

<template>
  <div>
    <ListComponent>
      <template #item="itemProps">
        <span>{{ itemProps.item.name }} - 自定义展示</span>
      </template>
      <template #footer="footerProps">
        <p>总共有 {{ footerProps.count }} 项</p>
      </template>
    </ListComponent>
  </div>
</template>

<script>
import ListComponent from './ListComponent.vue'
export default {
  components: {
    ListComponent
  }
}
</script>

通过具名作用域插槽，父组件可以分别针对不同插槽的数据进行不同的处理和展示。

v - slot 的功能扩展

  1. 动态插槽名 在 Vue 2.6.0 之后，v - slot 支持动态插槽名。这在一些需要根据条件动态选择插槽的场景中非常有用。 假设我们有一个 TabComponent 组件，用于展示不同的标签页内容：
<template>
  <div>
    <ul class="tab-nav">
      <li v - for="(tab, index) in tabs" :key="index" @click="activeTab = index">{{ tab.title }}</li>
    </ul>
    <div class="tab-content">
      <slot :name="activeTab === index? tab.name : null" v - for="(tab, index) in tabs" :key="index"></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { title: '标签 1', name: 'tab1' },
        { title: '标签 2', name: 'tab2' },
        { title: '标签 3', name: 'tab3' }
      ],
      activeTab: 0
    }
  }
}
</script>

<style scoped>
.tab-nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.tab-nav li {
  padding: 10px;
  cursor: pointer;
  background-color: #eee;
  margin-right: 5px;
}
.tab-nav li.active {
  background-color: #ccc;
}
.tab-content {
  padding: 10px;
  border: 1px solid #ccc;
}
</style>

在父组件中使用：

<template>
  <div>
    <TabComponent>
      <template v - slot:[tab.name] v - for="tab in tabs" :key="tab.name">
        <p>{{ tab.content }}</p>
      </template>
    </TabComponent>
  </div>
</template>

<script>
import TabComponent from './TabComponent.vue'
export default {
  components: {
    TabComponent
  },
  data() {
    return {
      tabs: [
        { title: '标签 1', name: 'tab1', content: '标签 1 的内容' },
        { title: '标签 2', name: 'tab2', content: '标签 2 的内容' },
        { title: '标签 3', name: 'tab3', content: '标签 3 的内容' }
      ]
    }
  }
}
</script>

这里通过 v - slot:[tab.name] 实现了动态插槽名，根据不同的 tab.name 来决定将内容插入到哪个插槽中。

  1. 解构赋值与 v - slot 在作用域插槽中，我们可以对传递过来的数据对象进行解构赋值，使得代码更加简洁明了。 还是以 ListComponent 为例，在父组件中：
<template>
  <div>
    <ListComponent>
      <template #item="{ item }">
        <span>{{ item.name }} - 解构赋值展示</span>
      </template>
    </ListComponent>
  </div>
</template>

<script>
import ListComponent from './ListComponent.vue'
export default {
  components: {
    ListComponent
  }
}
</script>

这里直接从 slotProps 对象中解构出 item，避免了每次都通过 slotProps.item 来访问数据，在数据对象属性较多时，这种方式能有效提高代码的可读性。

  1. 默认插槽的简写 当组件只有一个默认插槽时，v - slot:default 可以省略。 假设我们有一个简单的 CardComponent 组件：
<template>
  <div class="card">
    <h2>{{ title }}</h2>
    <slot></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '卡片标题'
    }
  }
}
</script>

<style scoped>
.card {
  border: 1px solid #ccc;
  padding: 10px;
  border - radius: 5px;
}
</style>

在父组件中可以这样使用：

<template>
  <div>
    <CardComponent>
      <p>这是卡片内容</p>
    </CardComponent>
  </div>
</template>

<script>
import CardComponent from './CardComponent.vue'
export default {
  components: {
    CardComponent
  }
}
</script>

如果要使用作用域插槽且是默认插槽，也可以省略 default：

<template>
  <div>
    <ListComponent>
      <template v - slot="{ item }">
        <span>{{ item.name }} - 省略 default</span>
      </template>
    </ListComponent>
  </div>
</template>

这种简写方式在实际开发中可以减少一些不必要的代码书写，提高开发效率。

v - slot 在实际开发中的使用场景

  1. 组件库开发 在开发 Vue 组件库时，v - slot 是非常重要的功能。以一个 ButtonGroup 组件为例，它用于将多个按钮组合在一起。
<template>
  <div class="button - group">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'ButtonGroup'
}
</script>

<style scoped>
.button - group {
  display: flex;
}
</style>

在使用这个 ButtonGroup 组件时，用户可以自由地传递不同类型的按钮：

<template>
  <div>
    <ButtonGroup>
      <button>按钮 1</button>
      <button>按钮 2</button>
    </ButtonGroup>
  </div>
</template>

<script>
import ButtonGroup from './ButtonGroup.vue'
export default {
  components: {
    ButtonGroup
  }
}
</script>

如果 ButtonGroup 组件需要对每个按钮进行一些特殊处理，比如添加类名或者传递一些属性，可以通过作用域插槽来实现：

<template>
  <div class="button - group">
    <slot v - for="(button, index) in buttons" :key="index" :button - index="index"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      buttons: [
        { text: '按钮 1' },
        { text: '按钮 2' }
      ]
    }
  }
}
</script>

<style scoped>
.button - group {
  display: flex;
}
.button - group button {
  margin - right: 5px;
}
</style>

在父组件中：

<template>
  <div>
    <ButtonGroup>
      <template v - slot="{ buttonIndex }">
        <button :class="`button - ${buttonIndex}`">{{ buttons[buttonIndex].text }}</button>
      </template>
    </ButtonGroup>
  </div>
</template>

<script>
import ButtonGroup from './ButtonGroup.vue'
export default {
  components: {
    ButtonGroup
  },
  data() {
    return {
      buttons: [
        { text: '按钮 1' },
        { text: '按钮 2' }
      ]
    }
  }
}
</script>

这样通过 v - slot，组件库的使用者可以灵活地定制组件内部的展示和行为，同时组件库开发者也能够提供一些基础的功能和数据，增强了组件库的通用性和灵活性。

  1. 页面布局组件 在构建页面布局时，v - slot 也发挥着重要作用。比如我们有一个 PageLayout 组件，它包含了页眉、页脚和主体内容区域：
<template>
  <div class="page - layout">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot name="main"></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'PageLayout'
}
</script>

<style scoped>
.page - layout {
  display: flex;
  flex - direction: column;
  min - height: 100vh;
}
header {
  background - color: #333;
  color: white;
  padding: 10px;
}
main {
  flex: 1;
  padding: 10px;
}
footer {
  background - color: #333;
  color: white;
  padding: 10px;
  text - align: center;
}
</style>

在不同的页面组件中使用 PageLayout 时，可以根据页面需求填充不同的内容到对应的插槽：

<template>
  <PageLayout>
    <template #header>
      <h1>首页</h1>
    </template>
    <template #main>
      <p>这里是首页的主要内容</p>
    </template>
    <template #footer>
      <p>版权所有 &copy; 2023</p>
    </template>
  </PageLayout>
</template>

<script>
import PageLayout from './PageLayout.vue'
export default {
  components: {
    PageLayout
  }
}
</script>

通过这种方式，我们可以快速搭建不同页面的布局结构，提高开发效率，同时保持代码的一致性和可维护性。

  1. 列表渲染与自定义展示 在处理列表数据展示时，v - slot 的作用域插槽功能非常实用。比如我们有一个商品列表组件 ProductList：
<template>
  <ul>
    <li v - for="product in products" :key="product.id">
      <slot :product="product"></slot>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: '商品 1', price: 100 },
        { id: 2, name: '商品 2', price: 200 },
        { id: 3, name: '商品 3', price: 300 }
      ]
    }
  }
}
</script>

在父组件中，我们可以根据不同的业务需求自定义商品的展示方式：

<template>
  <div>
    <ProductList>
      <template v - slot="{ product }">
        <div class="product - item">
          <h3>{{ product.name }}</h3>
          <p>价格: {{ product.price }} 元</p>
          <button>加入购物车</button>
        </div>
      </template>
    </ProductList>
  </div>
</template>

<script>
import ProductList from './ProductList.vue'
export default {
  components: {
    ProductList
  }
}
</script>

<style scoped>
.product - item {
  border: 1px solid #ccc;
  padding: 10px;
  margin - bottom: 10px;
}
</style>

如果是在后台管理系统中，可能还需要展示商品的更多详细信息，这时候只需要在父组件的作用域插槽中进行修改即可，而不需要修改 ProductList 组件的代码，实现了组件的复用性和灵活性。

  1. 表单组件的定制 在开发表单组件时，v - slot 可以让用户根据自身需求定制表单的各个部分。比如我们有一个 FormComponent 组件：
<template>
  <form>
    <slot name="fields"></slot>
    <slot name="submit - button">
      <button type="submit">提交</button>
    </slot>
  </form>
</template>

<script>
export default {
  name: 'FormComponent'
}
</script>

在父组件中使用时：

<template>
  <div>
    <FormComponent>
      <template #fields>
        <input type="text" placeholder="用户名">
        <input type="password" placeholder="密码">
      </template>
      <template #submit - button>
        <button type="submit">登录</button>
      </template>
    </FormComponent>
  </div>
</template>

<script>
import FormComponent from './FormComponent.vue'
export default {
  components: {
    FormComponent
  }
}
</script>

这样通过具名插槽，用户可以自由地定制表单的输入字段和提交按钮，满足不同业务场景下表单的需求。如果表单需要一些特殊的验证逻辑或者样式处理，也可以在插槽内的组件上添加相应的指令和样式类，而不需要修改 FormComponent 组件的核心代码。

  1. 模态框组件 模态框是前端开发中常见的组件，v - slot 在模态框组件的开发中也有很好的应用。比如我们有一个 ModalComponent 组件：
<template>
  <div v - if="isVisible" class="modal">
    <div class="modal - content">
      <header>
        <slot name="header"></slot>
        <button @click="closeModal">关闭</button>
      </header>
      <main>
        <slot name="body"></slot>
      </main>
      <footer>
        <slot name="footer"></slot>
      </footer>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: false
    }
  },
  methods: {
    openModal() {
      this.isVisible = true
    },
    closeModal() {
      this.isVisible = false
    }
  }
}
</script>

<style scoped>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background - color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify - content: center;
  align - items: center;
}
.modal - content {
  background - color: white;
  padding: 20px;
  border - radius: 5px;
  box - shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
header {
  border - bottom: 1px solid #ccc;
  padding - bottom: 10px;
  margin - bottom: 10px;
  display: flex;
  justify - content: space - between;
  align - items: center;
}
footer {
  border - top: 1px solid #ccc;
  padding - top: 10px;
  margin - top: 10px;
  text - align: right;
}
</style>

在父组件中：

<template>
  <div>
    <button @click="modal.openModal">打开模态框</button>
    <ModalComponent ref="modal">
      <template #header>
        <h2>模态框标题</h2>
      </template>
      <template #body>
        <p>这里是模态框的内容</p>
      </template>
      <template #footer>
        <button @click="modal.closeModal">取消</button>
        <button @click="handleSubmit">提交</button>
      </template>
    </ModalComponent>
  </div>
</template>

<script>
import ModalComponent from './ModalComponent.vue'
export default {
  components: {
    ModalComponent
  },
  methods: {
    handleSubmit() {
      // 处理提交逻辑
    }
  }
}
</script>

通过 v - slot，我们可以方便地定制模态框的标题、内容和底部操作按钮，使得模态框组件能够适应不同的业务场景，如提示框、确认框、编辑框等。

  1. 树形结构组件 在开发树形结构组件时，v - slot 可以帮助我们实现灵活的节点展示。假设我们有一个 TreeComponent 组件：
<template>
  <ul>
    <li v - for="node in treeData" :key="node.id">
      <slot :node="node" name="node">
        {{ node.label }}
      </slot>
      <ul v - if="node.children && node.children.length > 0">
        <TreeComponent :treeData="node.children" />
      </ul>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    treeData: {
      type: Array,
      default: () => []
    }
  }
}
</script>

在父组件中：

<template>
  <div>
    <TreeComponent :treeData="tree">
      <template #node="{ node }">
        <span>{{ node.label }} - 自定义展示</span>
        <button v - if="node.isEditable" @click="editNode(node)">编辑</button>
      </template>
    </TreeComponent>
  </div>
</template>

<script>
import TreeComponent from './TreeComponent.vue'
export default {
  components: {
    TreeComponent
  },
  data() {
    return {
      tree: [
        { id: 1, label: '根节点 1', isEditable: true, children: [
          { id: 11, label: '子节点 11', isEditable: false }
        ] },
        { id: 2, label: '根节点 2', isEditable: false }
      ]
    }
  },
  methods: {
    editNode(node) {
      // 处理编辑节点逻辑
    }
  }
}
</script>

通过作用域插槽，我们可以根据节点的数据属性（如 isEditable）来定制节点的展示内容，实现了树形结构组件的高度可定制性，满足不同业务场景下树形结构的展示和交互需求。

  1. 导航菜单组件 导航菜单是页面中常见的组件之一，v - slot 可以帮助我们实现灵活的菜单定制。假设我们有一个 NavMenuComponent 组件：
<template>
  <ul>
    <li v - for="(item, index) in menuItems" :key="index">
      <slot :item="item" name="menu - item">
        <a :href="item.href">{{ item.label }}</a>
      </slot>
      <ul v - if="item.children && item.children.length > 0">
        <NavMenuComponent :menuItems="item.children" />
      </ul>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    menuItems: {
      type: Array,
      default: () => []
    }
  }
}
</script>

在父组件中：

<template>
  <div>
    <NavMenuComponent :menuItems="menu">
      <template #menu - item="{ item }">
        <a :href="item.href">{{ item.label }} - 自定义样式</a>
        <span v - if="item.badge" class="badge">{{ item.badge }}</span>
      </template>
    </NavMenuComponent>
  </div>
</template>

<script>
import NavMenuComponent from './NavMenuComponent.vue'
export default {
  components: {
    NavMenuComponent
  },
  data() {
    return {
      menu: [
        { label: '首页', href: '/' },
        { label: '产品', href: '/products', children: [
          { label: '产品 1', href: '/products/1' },
          { label: '产品 2', href: '/products/2' }
        ] },
        { label: '关于我们', href: '/about', badge: '新' }
      ]
    }
  }
}
</script>

<style scoped>
.badge {
  background - color: red;
  color: white;
  padding: 2px 5px;
  border - radius: 3px;
  font - size: 12px;
  margin - left: 5px;
}
</style>

通过作用域插槽，我们可以根据菜单项的数据属性（如 badge）来定制菜单项的展示，添加一些额外的信息或者样式，使得导航菜单能够满足不同的业务需求，如显示未读消息数量、新功能提示等。

  1. 分页组件 在开发分页组件时，v - slot 可以用于定制分页按钮和页码的展示。假设我们有一个 PaginationComponent 组件：
<template>
  <div class="pagination">
    <slot name="prev - button">
      <button @click="prevPage">上一页</button>
    </slot>
    <span v - for="page in pages" :key="page" @click="goToPage(page)" :class="{ active: page === currentPage }">{{ page }}</span>
    <slot name="next - button">
      <button @click="nextPage">下一页</button>
    </slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      totalPages: 10
    }
  },
  computed: {
    pages() {
      return Array.from({ length: this.totalPages }, (_, i) => i + 1)
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++
      }
    },
    goToPage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.currentPage = page
      }
    }
  }
}
</script>

<style scoped>
.pagination {
  text - align: center;
  margin - top: 10px;
}
.pagination button {
  margin - right: 5px;
}
.pagination span {
  display: inline - block;
  width: 30px;
  height: 30px;
  line - height: 30px;
  text - align: center;
  margin - right: 5px;
  cursor: pointer;
  background - color: #eee;
}
.pagination span.active {
  background - color: #ccc;
}
</style>

在父组件中：

<template>
  <div>
    <PaginationComponent>
      <template #prev - button>
        <button @click="prevPage">Previous</button>
      </template>
      <template #next - button>
        <button @click="nextPage">Next</button>
      </template>
    </PaginationComponent>
  </div>
</template>

<script>
import PaginationComponent from './PaginationComponent.vue'
export default {
  components: {
    PaginationComponent
  },
  methods: {
    prevPage() {
      // 处理上一页逻辑
    },
    nextPage() {
      // 处理下一页逻辑
    }
  }
}
</script>

通过具名插槽，我们可以定制分页组件的上一页和下一页按钮的文本或者样式，满足不同语言环境或者设计风格的需求。同时，对于页码的展示，也可以通过在 PaginationComponent 组件中传递更多的数据属性，在父组件的作用域插槽中进行更复杂的定制，如显示省略号、跳转到指定页等功能。

通过以上对 v - slot 功能扩展及实际使用场景的详细介绍，相信开发者们能更好地在 Vue 项目中利用这一强大的指令，提升组件的复用性、灵活性和可维护性，构建出更加高效、优雅的前端应用。