vue.js 中的插槽是什么 - JavaScript

在 Vue.js 中，插槽（Slot）是一种用于在组件中扩展和自定义内容的机制。它允许组件的作者定义一些可插入的内容，然后在使用该组件时，允许用户通过这些插槽来插入自定义的内容。

插槽的基本使用

在一个 Vue 组件中，可以使用 <slot> 标签来定义一个插槽。一个组件可以包含多个插槽，每个插槽都可以有自己的默认内容。

以下是一个简单的示例，展示了如何在一个按钮组件中使用插槽：

<!-- Button.vue -->
<template>
  <button class="btn">
    <slot>Submit</slot>
  </button>
</template>

<!-- App.vue -->
<template>
  <div>
    <button>This is a default button</button>
    <Button>
      <span>Custom Button</span>
    </Button>
  </div>
</template>

<script>
import Button from './Button.vue'

export default {
  components: {
    Button
  }
}
</script>

在上述示例中，Button 组件定义了一个插槽 <slot>，插槽中的内容将会被渲染在按钮组件内部。在 App.vue 中使用 <Button> 标签时，我们可以直接在标签内部添加自定义的内容，这些内容将会替换掉默认的插槽内容。

具名插槽

除了默认插槽之外，Vue.js 还支持具名插槽。具名插槽允许我们在组件中定义多个插槽，并通过名称进行使用。这样可以使组件更加灵活和可配置。

以下是一个示例，展示了如何使用具名插槽：

<!-- Card.vue -->
<template>
  <div class="card">
    <div class="header">
      <slot name="header"></slot>
    </div>
    <div class="content">
      <slot></slot>
    </div>
    <div class="footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<!-- App.vue -->
<template>
  <Card>
    <template v-slot:header>
      <h2>Title</h2>
    </template>
    <p>Content goes here.</p>
    <template v-slot:footer>
      <button>Submit</button>
    </template>
  </Card>
</template>

<script>
import Card from './Card.vue'

export default {
  components: {
    Card
  }
}
</script>

在上述示例中，Card 组件定义了三个插槽，分别是 header、default 和 footer。在 App.vue 中使用 <Card> 标签时，我们使用 <template> 标签来定义具名插槽的内容，并通过 v-slot 指令来与插槽进行关联。

作用域插槽

作用域插槽（Scoped Slot）是一种特殊类型的插槽，它允许组件向插槽中传递数据。通过作用域插槽，组件可以将自己的内部状态或计算结果传递给插槽内容，使插槽内容更具灵活性和可复用性。

以下是一个示例，展示了如何使用作用域插槽：

<!-- UserList.vue -->
<template>
  <ul>
    <slot v-for="user in users" :user="user" :key="user.id">
      <!-- 默认插槽内容 -->
      <li>{{ user.name }}</li>
    </slot>
  </ul>
</template>

<!-- App.vue -->
<template>
  <UserList :users="userList">
    <!-- 作用域插槽 -->
    <template v-slot="{ user }">
      <li>{{ user.name }} - {{ user.age }}</li>
    </template>
  </UserList>
</template>

<script>
import UserList from './UserList.vue'

export default {
  components: {
    UserList
  },
  data() {
    return {
      userList: [
        { id: 1, name: 'John', age: 25 },
        { id: 2, name: 'Jane', age: 30 },
        { id: 3, name: 'Bob', age: 35 }
      ]
    }
  }
}
</script>

在上述示例中，UserList 组件通过 v-for 指令遍历 users 数组，并将数组中的每个元素作为参数传递给作用域插槽。在 App.vue 中使用 <UserList> 标签时，我们可以通过 <template> 标签来定义作用域插槽的内容，并在插槽的 template 属性中使用参数 user。

以上就是关于 vue.js 中插槽的介绍及基本使用方法，插槽能够帮助我们更好地封装和复用组件，同时也提供了更多的灵活性和定制化的可能性。