vue2 同一页面具名插槽怎么使用

在 Vue.js 2.x 中，你可以使用具名插槽(named slots)来在同一个组件中渲染不同的内容。具名插槽允许你在父组件中直接写入 HTML，并且将数据传递给子组件进行渲染。

以下是具名插槽的使用步骤：

1. 在父组件中定义具名插槽。例如：

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

在上面的示例中，我们使用 `name` 属性定义了三个具名插槽：`header`、默认插槽和 `footer`。

2. 在父组件中使用具名插槽。例如：

<template>
  <my-component>
    <h1 slot="header">This is the header</h1>
    <p>This is some content</p>
    <p>This is more content</p>
    <p slot="footer">This is the footer</p>
  </my-component>
</template>

在上面的示例中，我们在 `<my-component>` 组件中使用了三个具名插槽，分别传递了头部、主体和底部的内容。

3. 在子组件中渲染具名插槽。例如：

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

在上面的示例中，我们在子组件中使用了三个具名插槽，具名插槽的内容将会被渲染在对应的位置上。

总之，具名插槽是 Vue.js 中非常有用的功能，它可以帮助你在同一个组件中渲染不同的内容，并且可以将数据从父组件传递到子组件。