vue2插槽和作用域插槽

Vue2中的插槽分为默认插槽、具名插槽和作用域插槽三种类型。

默认插槽是指没有被包裹在具名插槽中的内容，可以通过在父组件中使用<slot>标签来使用默认插槽。

具名插槽是指被包裹在<template>标签中，并且带有name属性的内容。可以在父组件中使用<slot>标签的name属性来使用具名插槽。

作用域插槽是指可以将子组件中的数据传递到父组件中进行处理的插槽。可以通过在子组件中使用<slot>标签，并且在标签中使用slot-scope属性来定义作用域插槽。在父组件中使用<template>标签，并且在标签中使用v-slot属性来使用作用域插槽。

下面是一个使用具名插槽和作用域插槽的例子：

<!-- 子组件 -->
<template>
  <div>
    <h2>子组件</h2>
    <slot name="header"></slot>
    <ul>
      <li v-for="item in list" :key="item">{{ item }}</li>
    </ul>
    <slot name="footer" :list="list"></slot>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    list: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <div>
    <h2>父组件</h2>
    <ChildComponent :list="list">
      <template v-slot:header>
        <h3>这是子组件的头部</h3>
      </template>
      <template v-slot:footer="slotProps">
        <h3>这是子组件的尾部</h3>
        <p>列表长度：{{ slotProps.list.length }}</p>
      </template>
    </ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      list: ['item1', 'item2', 'item3']
    }
  }
}
</script>