vue 中插槽共有几种

发布时间:2023-06-30 14:18:00

发布人:zyh

　　在Vue中，有三种类型的插槽可用于组件间的内容分发：

　　1. 匿名插槽(Default Slot)：匿名插槽是最常见的一种插槽类型。当组件没有具名插槽时，所有没有被包裹在具名插槽中的内容都会被放置在匿名插槽中。在组件模板中使用 `` 标签来表示匿名插槽。

　　示例：　

<template>
  <div>
    <slot></slot>
  </div>
</template>

　　2. 具名插槽(Named Slot)：具名插槽允许你在组件中定义多个插槽，并为它们命名。这样，父组件可以根据插槽的名称将内容分发到相应的插槽中。在组件模板中使用 `` 标签的 `name` 属性来表示具名插槽。

　　示例：　　

<template>
  <div>
    <slot name="header"></slot>
    <slot name="content"></slot>
    <slot name="footer"></slot>
  </div>
</template>

　　父组件使用具名插槽分发内容：　　

<template>
  <custom-component>
    <template v-slot:header>
      <!-- 插入头部内容 -->
    </template>
    <template v-slot:content>
      <!-- 插入内容 -->
    </template>
    <template v-slot:footer>
      <!-- 插入底部内容 -->
    </template>
  </custom-component>
</template>

　　3. 作用域插槽(Scoped Slot)：作用域插槽允许子组件将数据传递给父组件，以便父组件可以在插槽中使用。通过在子组件中使用 `` 标签的属性和具名插槽结合，可以将子组件的数据传递给父组件。

　　示例：

　　子组件模板：　　

<template>
  <div>
    <slot :data="componentData"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      componentData: 'Some data from child component'
    };
  }
};
</script>

　　父组件使用作用域插槽获取子组件数据：　

<template>
  <custom-component>
    <template v-slot:default="slotProps">
      <p>{{ slotProps.data }}</p>
    </template>
  </custom-component>
</template>