窥探 Vue 插槽背后的秘密

2024-02-08 23:49:06

Vue 插槽机制揭秘

在 Vue.js 中，插槽是一种强大的内容分发机制，允许组件接受和显示动态内容，从而实现更灵活和可重用的代码。在本文中，我们将深入探讨插槽的运作原理，解开它的神秘面纱。

没有 v-slot 指令

当没有使用 v-slot 指令时，组件包含的内容将作为父组件的 children 出现。此时，内部是否存在插槽对编译结果没有影响。当组件实例化时，会执行以下操作：

resolveSlots(children, slots) {
  if (!children || children.length === 0) {
    return
  }
  // 获取插槽内容
  const defaultSlot = extractPropsFromVNodeData(
    children,
    resolveSlots
  )
  if (!defaultSlot) {
    return
  }
  // ...
}

此代码用于解析插槽内容并将其存储在 defaultSlot 变量中。

使用 v-slot 指令

当使用 v-slot 指令时，父组件的内容将通过插槽传递给子组件。编译器会执行以下步骤：

createScopedSlot(ref, binding, children, vnode) {
  // 创建作用域插槽函数
  const fn = createFunctionFactory(
    codegenNode(binding, children),
    // 绑定变量名
    null,
    ref
  )
  // 存储作用域插槽函数
  if (context) {
    if (!context.scopedSlots) {
      context.scopedSlots = {}
    }
    context.scopedSlots[binding.arg] = fn
  }
  return fn
}

此代码创建了一个作用域插槽函数，该函数将父组件的内容作为参数接收。该函数存储在组件的 scopedSlots 对象中，以便稍后在渲染过程中使用。

插槽在渲染中的作用

在渲染过程中，插槽内容被插入到父组件模板中指定的插槽位置。以下示例展示了这一点：

<parent>
  <slot name="header">
    <h1>My Header</h1>
  </slot>
  <slot name="body">
    <p>My Body</p>
  </slot>
</parent>

// 父组件
export default {
  template: `
    <div>
      <header>
        <slot name="header"></slot>
      </header>
      <main>
        <slot name="body"></slot>
      </main>
    </div>
  `
}