vue插槽（二）

具名插槽

除了默认插槽外，Vue还支持具名插槽，用于更灵活地分发内容。具名插槽使用带有name属性的<slot>元素来定义。在使用组件时，我们可以通过指定插槽的名称来向具名插槽中插入内容。

下面是一个示例，展示了如何在组件中定义和使用具名插槽：

代码语言：javascript复制

<template>
  <div>
    <h1>Parent Component</h1>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

在上面的示例中，我们定义了三个插槽，分别是header、默认插槽和footer。通过指定name属性，我们将这些插槽命名，并可以在使用组件时，根据需要向对应的插槽中插入内容。

使用示例：

代码语言：javascript复制

<template>
  <div>
    <parent-component>
      <template v-slot:header>
        <h2>This is the header</h2>
      </template>

      <p>This is the content of the default slot.</p>

      <template v-slot:footer>
        <footer>This is the footer</footer>
      </template>
    </parent-component>
  </div>
</template>

<script>
import ParentComponent from './ParentComponent.vue';

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

在上面的示例中，我们使用v-slot指令和name属性来指定插槽的名称，并在对应的插槽中插入内容。在父组件中，通过<template>标签来定义具名插槽，并使用v-slot指令来指定插槽的名称。

作用域插槽

作用域插槽是一种特殊类型的插槽，允许我们传递数据到插槽中，并在插槽中使用该数据。作用域插槽使用<slot>元素的v-slot指令来定义，并可以接收参数。

下面是一个示例，展示了如何在组件中定义和使用作用域插槽：

代码语言：javascript复制

<template>
  <div>
    <h1>Parent Component</h1>
    <slot name="header" :message="message"></slot>
  </div>
</template>

在上面的示例中，我们定义了一个具有参数message的作用域插槽。通过使用:message="message"，我们将组件中的message数据传递到插槽中。

使用示例：

代码语言：javascript复制

<template>
  <div>
    <parent-component>
      <template v-slot:header="slotProps">
        <h2>{{ slotProps.message }}</h2>
      </template>
    </parent-component>
  </div>
</template>

<script>
import ParentComponent from './ParentComponent.vue';

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

在上面的示例中，我们使用v-slot指令来定义作用域插槽，并使用slotProps参数来接收插槽传递的数据。在插槽的内容中，我们可以通过slotProps.message来访问传递的数据。

vue.js

0 人点赞