简述Vue的普通Slot以及作用域Slot的区别 ？

Vue.js 的插槽（Slot）是一种强大的机制，它允许你向子组件中插入内容。在 Vue.js 中，主要有两种类型的插槽：普通插槽（默认插槽）和作用域插槽（具名插槽）。

普通插槽（默认插槽）

普通插槽是最简单的插槽形式。在子组件的模板中，你可以使用 <slot></slot> 标签来定义插槽的位置。当父组件使用子组件时，任何在子组件标签内的内容都会替换 <slot></slot> 标签的位置。如果没有提供内容，那么 <slot></slot> 将什么都不会渲染。

例如：

<!-- 子组件 -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

<!-- 父组件 -->
<template>
  <ChildComponent>
    <p>这是一段插入的内容</p>
  </ChildComponent>
</template>

在这个例子中，<p>这是一段插入的内容</p> 会被插入到子组件的 <slot></slot> 位置。

作用域插槽（具名插槽）

作用域插槽允许子组件将数据“传递”回父组件的插槽内容中。子组件在其 <slot> 标签上绑定一个对象，这个对象中的属性可以在父组件的插槽内容中被访问。这使得父组件可以根据子组件的状态来动态改变插槽的内容。

例如：

<!-- 子组件 -->
<template>
  <div>
    <slot :user="user"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: 'Alice',
        age: 30
      }
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <ChildComponent>
    <template v-slot:default="slotProps">
      <p>用户名称：{{ slotProps.user.name }}</p>
      <p>用户年龄：{{ slotProps.user.age }}</p>
    </template>
  </ChildComponent>
</template>

在这个例子中，子组件通过 :user="user" 将 user 对象传递给插槽。然后，在父组件中，我们使用 <template v-slot:default="slotProps"> 来接收这个对象，并在插槽内容中使用它。注意，v-slot:default 可以简写为 #default。

总的来说，普通插槽主要用于向子组件插入静态内容，而作用域插槽则允许父组件根据子组件的状态动态地插入内容。