请举例说明，vue中插槽与作用域插槽的作用和使用场景。并给出必要的代码解释

在Vue.js中，插槽（Slots）是一种组件设计模式，用于在组件之间共享内容或部分UI结构。它允许你将内容插入到特定的位置，比如头部、主体或尾部。主要有两种类型的插槽：

1. 默认插槽（Default Slot）：这是每个组件内部都会创建的一个特殊的插槽，如果没有明确提供其他插槽内容，就会填充这个默认的内容。例如，在`App`组件中，你可以这样使用：

<template>
  <div>
    <header slot="default">这是默认插槽</header>
    <slot></slot> <!-- 如果有子组件提供内容，这里会显示其提供的内容 -->
  </div>
</template>

2. 作用域插槽（Scoped Slots）：当你需要更精确地控制子组件传递给父组件的插槽内容时，可以使用作用域插槽。它们通常通过`v-slot`指令声明，并在子组件的模板中使用。

<!-- 父组件 -->
<template>
  <my-component v-slot="{ item }">
    <p>{{ item.name }}</p> <!-- 使用item作为传入的插槽变量 -->
  </my-component>
</template>

<!-- 子组件 -->
<template>
  <slot name="customSlot">{{ itemData }}</slot> <!-- 声明了一个名为"customSlot"的插槽 -->
</template>

在这个例子中，`my-component`接收来自父组件的数据并通过名字`customSlot`传递。