Vue插槽详解

简介

Vue实现了一套内容分发的API这套API的设计灵感来源自WebComponents规范草案，将<slot>元素作为承载分发内容的出口，什么是内容分发呢？就是说这个模块的内容我们可以后续在填充进来

使用插槽我们咳哟实现组件内容由调用时传入，可以实现更灵活的组件

插槽类型

匿名插槽

子组件用slot标签来确定渲染的位置，标签里面放上DOM结构，当父组件使用的时候没有向slot内部传入内容，标签内的DOM结构就会显示出来

// 子组件Child.vue
<template>
    <slot>
        后备内容
    </slot>
</template>
// 父组件Parent.vue
<Child>
  <div>默认插槽</div>  
</Child>
    

具名插槽

子组件有name属性来表示插槽的名字，如果不传则是匿名插槽，父组件使用时在默认插槽的基础上添加slot属性

// 子组件
<template>
    <slot>插槽后备的内容</slot>
  <slot name="content">插槽后备的内容</slot>
</template>
// 父组件
<child>
    <template v-slot:default>具名插槽</template>
    <!-- 具名插槽⽤插槽名做参数 -->
    <template v-slot:content>内容...</template>
</child>

作用域插槽

作用域插槽时Vue.js中的一个高级特性，它允许组件的插槽内容访问子组件的数据，通过作用域插槽，可以创建更为灵活和可复用的组件，在vue2.x中作用域插槽的工作方式是这样的

1.在子组件模板中，你可以将数据作为属性传递给插槽，这些属性将被包裹在一个对象中，这个对象可以通过v-slot指令(在Vue2.6.0+中引入,之前的版本使用slot-scope）再父组件的插槽内容中访问。

2. 父组件:在父组件中你可以使用v-slot指令定义一个模板来接受子组件传递的数据，v-slot可以指定一个名称,该名称对应子组件插槽的名称

<!-- 子组件 ChildComponent.vue -->
<template>
  <div>
    <slot :user="user">
      <!-- 插槽的默认内容 -->
      Default content
    </slot>
  </div>
</template>

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

在子组件中我们定义了一个名为user的插槽，并将user对象作为属性传递给了插槽

<!-- 父组件 ParentComponent.vue -->
<template>
  <ChildComponent>
    <template v-slot:default="slotProps">
      <!-- 使用子组件传递的数据 -->
      User name: {{ slotProps.user.name }}, Age: {{ slotProps.user.age }}
    </template>
  </ChildComponent>
</template>

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

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

在父组件中我们使用v-slot指令定义了一个模板来接收子组件传递的user数据。slotProps是自定义的名称，它包含了子组件传递给插槽的所有属性。在Vue3.x中，作用域插槽的工作方式略有不同，但基本概念是相同的，vue3中推荐使用v-slot，并且可以在没有默认插槽的情况下直接使用#符号作用域插槽是一个强大的特性，它允许父组件以声明式的方式访问子组件的数据，从而创建更加动态和可以配置的组件。