Vue 组件中的 slot 详解-JavaScript中文网-JavaScript教程资源分享门户

在 Vue 的组件系统中，slot 是一种可以让父组件向子组件传递内容的机制。可以理解为组件之间的通信方式，用来传递一些特定组件中的内容，从而实现更高级别的组件复用。

什么是 slot？

首先，我们需要了解什么是 slot。在 Vue 中，slot 可以分为两种类型：具名 slot 和默认 slot。具名 slot 是指通过指定名字来将内容传递给子组件，而默认 slot 则是将父组件的内容直接传递给子组件，不需要指定名字。

我们可以通过在组件中使用 <slot> 标签来声明能够接收父组件传递的内容的插槽。当父组件中使用相应的标签，并在标签中填写需要传递的内容时，这些内容就会被放置到对应的插槽中。

具名 slot

以一个简单的例子来说明更加详细的具名 slot 的用法。

// child.vue
<template>
  <div>
    <h1>我是子组件</h1>
    <slot name="title">默认标题</slot>
    <slot name="content">默认内容</slot>
  </div>
</template>

父组件可以通过在标签上使用 v-slot: 或 # 的方式来指定要填充具名插槽的内容。如下所示：

// javascriptcn.com 代码示例
// parent.vue
<template>
  <div>
    <child>
      <template v-slot:title>这是标题</template>
      <template v-slot:content>这是内容</template>
    </child>
  </div>
</template>

<script>
import Child from "./child.vue";

export default {
  components: {
    Child
  }
};
</script>

在上述代码中，我们通过将父组件中的内容分别传递到子组件中名为 title 和 content 的插槽中，从而实现了在子组件中展示父组件传递的内容。需要注意的是，当一个组件只有一个默认 slot 的时候，可以将内容直接传递到组件标签内部。

默认 slot

当我们不需要给插槽命名时，仅需要将内容传递给组件的默认插槽时，可以这样写：

// child.vue
<template>
  <div>
    <h1>我是子组件</h1>
    <slot>默认内容</slot>
  </div>
</template>

父组件中的写法则变得非常简单：

// javascriptcn.com 代码示例
// parent.vue
<template>
  <div>
    <child>这是父组件中的内容</child>
  </div>
</template>

<script>
import Child from "./child.vue";

export default {
  components: {
    Child
  }
};
</script>

这样，我们就实现了子组件展示父组件中传递的内容的需求。需要注意的是，如果一个组件中只有一个默认插槽，那么在父组件中可以直接将要传递的内容写入组件标签中。

其他用法

除了上述两个用法以外，Vue 中的 slot 还可以使用 slot-scope 属性来将作用域传递给子组件。例如：

// javascriptcn.com 代码示例
// child.vue
<template>
  <div>
    <h1>我是子组件</h1>
    <slot v-bind:user="user"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: "foo",
        age: 18
      }
    };
  }
};
</script>

我们可以看到，在子组件中，我们将作用域传递给了 slot。那么，如何在父组件中使用这个作用域呢？可以这样写：

// javascriptcn.com 代码示例
// parent.vue
<template>
  <div>
    <child>
      <template v-slot="{ user }">
        <div>{{ user.name }}</div>
        <div>{{ user.age }}</div>
      </template>
    </child>
  </div>
</template>

<script>
import Child from "./child.vue";

export default {
  components: {
    Child
  }
};
</script>

这样，我们就可以在父组件中使用具有作用域的 slot 了。

总结

在组件化开发过程中，Vue 的 slot 机制非常方便。通过在组件中定义子组件可以接收内容的插槽，可以在父组件向子组件传递内容，从而实现更高级别的组件复用。需要注意的是，slot 还有具名插槽、默认插槽、作用域插槽等多种用法，可以满足不同的开发需求。以上是 Vue slot 的详细讲解和示例演示。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6534a59b7d4982a6eb999879