vue2具名插槽跟作用域插槽同时使用

在Vue2中，具名插槽和作用域插槽可以同时使用。具名插槽用于定义不同的插槽内容，而作用域插槽用于将数据传递给插槽内容。

下面是一个示例，演示了如何同时使用具名插槽和作用域插槽：

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

<script>
export default {
  data() {
    return {
      user: {
        name: 'John',
        age: 25
      }
    };
  }
};
</script>

在上面的示例中，我们定义了三个具名插槽：header、default和footer。同时，我们在header插槽和default插槽上使用了作用域插槽，将user对象传递给插槽内容。

使用这个组件时，可以这样写：

<my-component>
  <template v-slot:header="slotProps">
    <h1>Welcome, {{ slotProps.user.name }}</h1>
  </template>
  <p>This is the main content.</p>
  <template v-slot:footer>
    <p>Footer content goes here.</p>
  </template>
</my-component>

在上面的示例中，我们在header插槽上使用了作用域插槽，并通过slotProps参数访问了user对象的属性。在default插槽和footer插槽中，我们没有使用作用域插槽。