插槽的作用

Vue 插槽是组件化开发中非常重要的功能，它主要有以下几个核心作用：

内容分发：允许父组件向子组件注入内容，实现组件的内容定制；

数据通讯：子组件可以向插槽传递数据，实现数据与展示分离，父组件决定如何渲染子组件提供的数据；

增强组件复用性：同一组件可以适应多种使用场景，通过不同插槽内容实现不同视觉效果；

插槽机制是Vue组件化设计中最重要的特性之一，可以大大提高组件的可复用性和灵活性。

插槽的基本使用

代码中用到了三种类型的插槽 默认插槽、具名插槽、作用域插槽。

子组件

vue
 代码解读
复制代码

父组件

vue
 代码解读
复制代码

上面是插槽的基本用法

插槽的本质

插槽的本质就是函数 下面举个例子，用另一种方式实现默认插槽、具名插槽和作用域插槽

子组件

现在子组件是第一个TS文件 setup函数接收两个参数：

props：接收父组件传递的 props 值;

context：包含四个组件属性 attrs（接收非 props 的属性）、slots（接收插槽内容）、emit（用于触发事件）、expose（显式暴露组件公共实例内容）;

createElementVNode() 用于创建虚拟节点 ， 接收以下三个参数：

   type：节点类型

   props：属性/Props（可选）

   children：子节点

这里只用到 slots属性，所以只介绍slots属性，通过下面的打印可以看出，slots 的本质是个对象 ，对象里面包含了调用插槽的函数

ts
 代码解读
复制代码
import { createElementVNode } from 'vue'
export default {
  setup(props, ctx) {
    console.log(props, ctx)
    return () => createElementVNode('div', null, [])
  },
}

结合上面插槽的基本使用，不难发现，使用插槽是父组件给子组件传递了一个对象，对象里面包含了 插槽的函数，在子组件中调用函数，将函数的返回结果渲染到页面

下面调用函数实现插槽功能

ts
 代码解读
复制代码
import { createElementVNode } from 'vue'
export default {
  setup(props, { slots }) {
    const defaultSlot = slots.default()
    const slotB = slots.slotB()
    const slotC = slots.slotC({ msg: '作用域插槽' })
    console.log('slotC', slotC)
    return () =>
      createElementVNode('div', null, [...defaultSlot, ...slotB, ...slotC])
  },
}

下面的效果跟单文件组件的效果一样，并且可以看到插槽函数执行之后返回的虚拟节点，这些虚拟节点就是要渲染到页面上的

总结

插槽的本质是个函数，在父组件传递给子组件一个包含插槽内容的对象（称为 slots），子组件模板中的 标签会被替换为对 slots 对象的调用；父组件先渲染自己的内容，但不立即渲染插槽内容，将插槽内容保存为函数（作用域插槽是带参数的函数），子组件渲染时调用这些函数获取实际的 VNode。