Vue 插槽 Slot，优雅构建组件交互！

2023-12-12 07:46:28

Vue 中的插槽（Slot）是一种强大的功能，它允许组件之间传递数据和内容，从而实现灵活的组件交互。通过使用插槽，我们可以将组件的某些部分（如标题、内容、按钮等）定义为可替换的部分，然后在父组件中使用这些插槽来动态地插入内容。

插槽 Slot 的基本用法

插槽的基本用法非常简单。首先，在父组件中定义一个插槽，然后在子组件中使用该插槽。

<!-- 父组件 -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <h1>子组件标题</h1>
    <p>子组件内容</p>
  </div>
</template>

在上面的例子中，父组件定义了一个名为 slot 的插槽，子组件在使用时，将自己的内容插入到了父组件的插槽中。这样，父组件就可以动态地显示子组件的内容了。

插槽 Slot 的作用域

插槽的作用域是指，插槽内部可以使用父组件的数据和方法。这使得我们可以很容易地在子组件中访问父组件的数据，从而实现更加复杂的组件交互。

<!-- 父组件 -->
<template>
  <div>
    <slot :title="title"></slot>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>子组件内容</p>
  </div>
</template>

在上面的例子中，父组件将 title 数据传递给了子组件，子组件可以通过 {{ title }} 访问到这个数据。这样，子组件就可以动态地显示父组件传递过来的数据了。

插槽 Slot 的动态插槽名称

插槽还可以有动态的插槽名称。这意味着我们可以根据不同的条件来决定使用哪个插槽。

<!-- 父组件 -->
<template>
  <div>
    <slot name="header"></slot>
    <slot name="content"></slot>
    <slot name="footer"></slot>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <template v-slot:header>
      <h1>子组件标题</h1>
    </template>
    <template v-slot:content>
      <p>子组件内容</p>
    </template>
    <template v-slot:footer>
      <p>子组件页脚</p>
    </template>
  </div>
</template>