vue中具名插槽与作用域查擦

具名插槽和作用域插槽是Vue中常用的插槽技术，它们可以让我们更加灵活地组合组件，实现更加复杂的功能。下面是具名插槽和作用域插槽的介绍和演示：

具名插槽：
具名插槽可以让我们在一个组件中定义多个插槽，并且可以在父组件中指定要使用哪个插槽。具名插槽的使用步骤如下：

1.在子组件中定义具名插槽：

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

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

<template>
  <div>
    <my-component>
      <template v-slot:header>
        <h1>这是头部</h1>
      </template>
      <template v-slot:body>
        <p>这是内容</p>
      </template>
      <template v-slot:footer>
        <p>这是底部</p>
      </template>
    </my-component>
  </div>
</template>

3.结果展示：

这是头部
这是内容
这是底部

作用域插槽：
作用域插槽可以让子组件向父组件传递数据，父组件可以在插槽中使用这些数据。作用域插槽的使用步骤如下：

1.在子组件中定义作用域插槽：

<template>
  <div>
    <slot name="item" v-for="item in items" :item="item"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['item1', 'item2', 'item3']
    }
  }
}
</script>

2.在父组件中使用作用域插槽：

<template>
  <div>
    <my-component>
      <template v-slot:item="slotProps">
        <p>{{ slotProps.item }}</p>
      </template>
    </my-component>
  </div>
</template>

3.结果展示：

item1
item2
item3