【vue高频面试题—基础篇】：slot是什么 有什么作用 原理是什么

1. 什么是 Vue Slot（插槽）

   • 在 Vue 中，插槽（Slot）是一种内容分发机制。它允许你在组件中定义一个占位符，这个占位符可以在组件使用时被填充特定的内容。

   • 例如，有一个名为my - component的组件，它内部有一个插槽：

<template>
  <div>
    <h2>Component Title</h2>
    <slot></slot>
  </div>
</template>

• 当我们在使用my - component组件时，可以向插槽中插入内容：

<my - component>
  <p>这是插入到插槽中的内容</p>
</my - component>

2. 作用

   • 内容分发

     • 插槽的主要作用是实现内容分发。它允许父组件向子组件传递内容，使得子组件在保持自身结构和逻辑的同时，可以展示由父组件提供的内容。
     • 比如，在开发一个通用的对话框组件时，对话框的标题、按钮等内容可以由父组件根据具体业务场景来决定。通过插槽，父组件可以灵活地将不同的内容传递给对话框组件。

   • 提高组件复用性

     • 利用插槽可以大大提高组件的复用性。一个组件可以定义不同类型的插槽，以适应多种使用场景。
     • 例如，一个布局组件可能有头部插槽、主体插槽和底部插槽。在不同的页面中使用这个布局组件时，可以根据页面需求向不同的插槽插入相应的内容，而无需对布局组件本身进行修改。

3. 原理

   • 编译阶段

     • 在 Vue 的编译阶段，当编译器遇到组件中的插槽标签<slot>时，它会记录下插槽的位置和相关信息。
     • 对于具名插槽（使用name属性来区分不同的插槽，如<slot name = "header"></slot>），编译器会根据名称来识别和处理。

   • 渲染阶段

     • 当组件被渲染时，Vue 会查找是否有内容被插入到插槽中。如果有，它会将插入的内容替换到组件内对应的插槽位置。

     • 对于作用域插槽（一种可以让插槽内容访问子组件数据的插槽），子组件会将数据通过特定的方式传递给插槽内容。例如，子组件可能会将一个数据对象传递给插槽，插槽内容可以根据这个数据对象来进行渲染：

<!-- 子组件 -->
<template>
  <div>
    <slot :data = "childData"></slot>
  </div>
</template>
<script>
export default {
  data () {
    return {
      childData: {
        message: '这是子组件的数据'
      }
    }
  }
}
</script>
<!-- 父组件 -->
<template>
  <my - child - component>
    <template v - slot:default = "slotProps">
      <p>{{ slotProps.data.message }}</p>
    </template>
  </my - child - component>
</template>

• 在这个例子中，子组件将childData对象通过插槽传递给父组件的插槽内容，父组件的插槽内容可以使用这个数据进行渲染。

总结：

“Vue Slot 是一种内容分发机制。它是组件里的占位符。作用主要有两个，一是实现内容分发，让父组件能把内容传递给子组件；二是提高组件复用性，通过定义不同插槽来适应多种场景。

原理上，在编译阶段，编译器会记录插槽信息。渲染阶段，会把插入到插槽的内容替换到组件内对应的位置，对于作用域插槽，子组件还能把数据传递给插槽内容用于渲染。”