vue默认插槽、具名插槽、作用域插槽笔记

Vue组件的插槽是一种抽象的概念，用于分发组件的内容。Vue提供了三种类型的插槽：默认插槽、具名插槽和作用域插槽。

默认插槽是没有名字的插槽，可以在组件模板中使用<slot>标签来定义。当组件没有具名插槽时，所有没有被包裹在具名插槽中的内容都会被传递到默认插槽中。

具名插槽是有名字的插槽，可以在组件模板中使用<slot name="xxx">标签来定义。当组件中有多个插槽时，可以使用具名插槽来指定要分发的内容。

作用域插槽是一种特殊的插槽，可以让父组件向子组件传递数据。作用域插槽可以在组件模板中使用<slot>标签来定义，并且可以使用一个带有参数的函数来向插槽中传递数据。

例如，下面是一个使用作用域插槽的例子：

<template>
  <div>
    <slot v-bind:user="user">
      {{ user.lastName }}
    </slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        firstName: 'John',
        lastName: 'Doe'
      }
    }
  }
}
</script>

在父组件中，可以这样使用这个组件：

<template>
  <div>
    <user-profile>
      <template v-slot:default="slotProps">
        {{ slotProps.user.firstName }}
      </template>
    </user-profile>
  </div>
</template>

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

export default {
  components: {
    UserProfile
  }
}
</script>

这个例子中，父组件向子组件传递了一个名为user的数据对象，并且在插槽中使用了一个带有参数的函数来向插槽中传递数据。在插槽中，可以使用slotProps来访问传递进来的数据。