Vue源码阅读（26）：slot 插槽的源码解析

已于 2024-03-13 23:20:54 修改
阅读量2.1k 收藏 2
点赞数 2
分类专栏： vue源码阅读系列 文章标签： vue.js javascript 源码
于 2021-09-04 15:34:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/f18855666661/article/details/120004708
版权

 我的开源库：

建议先复习一下插槽的用法，官方文档点击这里。

今天和大家讲讲 Vue 中的插槽功能，主要从普通插槽、后备内容、具名插槽、作用域插槽这四个知识点进行解析。

1，普通插槽

对应文档点击这里。

首先从插槽最简单的用法讲起，实现功能的重点是子组件的实例和子组件的 render 函数，我们以下面这个简单的例子进行解析。

Vue.component('hello-world', {
  template: `
    <div class="hello_world">
      <h2>我是 HelloWorld 组件</h2>
      <slot></slot>
    </div>
  `,
  methods: {}
})

new Vue({
  el: '#app',
  data() {
    return {}
  },
  methods: {},
  template: `
    <div class="app_container">
      <h1>我是APP</h1>
      <hello-world>
        <h3>我是 slot</h3>
      </hello-world>
    </div>
  `
})

该例子渲染的页面如下所示：

1-1， 父组件的 vnode

父组件生成的 vnode 如下所示，该 vnode 节点有三个子节点，第三个子节点就是 hello-world 组件的 vnode 节点。在 Vue 中，每一个使用的组件都会有一个相对应的 Vue 实例，在目前的阶段，该组件的实例还没有被创建出来，所以 vnode.componentInstance 的值是 undefined。vnode.componentOptions 对象中的数据用于创建该组件的实例，可以发现在 vnode.componentOptions 对象中，有一个 children 属性，该属性保存着 hello-world 组件的子节点，并且该子节点已经被编译成了 vnode。

1-2，初始化子组件实例的 $slots 属性

在 1-1 小节中，父组件的 vnode 已经创建出来了，所以之后会进行父组件的 patch 操作，在 patch 到第三个子节点的时候，发现该 vnode 是一个组件节点，此时会进行子组件 vnode 的实例化操作，这部分的代码看 src/core/instance/init.js。

Vue.prototype._init = function (options?: Object) {
  // vm 就是 Vue 的实例对象，在 _init 方法中会对 vm 进行一系列的初始化操作
  const vm: Component = this

  // 初始化与插槽有关的内容
  initRender(vm)
}

 在 _init 方法中，与插槽有关的代码是 initRender(vm)，我们看下 initRender() 函数。

export function initRender (vm: Component) {
  // 对 options._renderChildren 进行解析，并将解析的结果赋值到 vm.$slots
  vm.$slots = resolveSlots(options._renderChildren, renderContext)
}

在我们的例子中，vm.$slots 的值为：

vm.$slots = {
  default: [{
    // h3 vnode 节点
    tag: "h3",
    children: [{
      // h3 vnode 节点下面的文本子节点
      text: "我是 slot"
    }]
  }]
}

1-3，子组件执行 render 函数，生成子组件的 vnode

子组件的 render 函数如下所示：

with(this){
  return _c(
    'div',
    {staticClass:"hello_world"},
    [
      _c('h2',[_v("我是 HelloWorld 组件")]),
      _v(" "),
      _t("default")
    ],
    2
  )
}

在子组件的 render 函数中，与 <slot></slot> 模板字符串有关的代码字符串是 _t("default")，_t  是 renderSlot 方法的别名，我们看 renderSlot 函数。

export function installRenderHelpers (target: any) {
  ......
  target._t = renderSlot
  ......
}

在 renderSlot 函数中，通过 "default" slot 名称从子组件实例的 $slots 属性中获取 <hello-world></hello-world> 的子节点数组。

export function renderSlot (
  name: string,
  fallback: ?Array<VNode>,
  props: ?Object,
  bindObject: ?Object
): ?Array<VNode> {
  const scopedSlotFn = this.$scopedSlots[name]
  if (scopedSlotFn) { // scoped slot
    ......
  } else {
    // 代码执行到这里
    // 从 this.$slots 对象中获取指定插槽的数组，在这里 name == "default"
    const slotNodes = this.$slots[name]
    // warn duplicate slot usage
    if (slotNodes && process.env.NODE_ENV !== 'production') {
      slotNodes._rendered && warn(
        `Duplicate presence of slot "${name}" found in the same render tree ` +
        `- this will likely cause render errors.`,
        this
      )
      slotNodes._rendered = true
    }
    // 将 slotNodes 返回
    return slotNodes || fallback
  }
}

执行子组件 render 函数最终生成的 vnode 如下所示：

可以发现，子组件中的 <slot></slot> 已经变成了 <h3>我是 slot</h3>。

子节点的 vnode 渲染到页面上，最终的效果如下所示：

2，后备内容

对应文档点击这里。

实现该功能的重点主要看子组件的 render 函数。

我们以下面的代码为例。

Vue.component('hello-world', {
  template: `
    <div class="hello_world">
      <h2>我是 HelloWorld 组件</h2>
      <slot>
        <h3>slot 默认内容</h3>
      </slot>
    </div>
  `,
  methods: {}
})

new Vue({
  el: '#app',
  data() {
    return {}
  },
  methods: {},
  template: `
    <div class="app_container">
      <h1>我是APP</h1>
      <hello-world></hello-world>
    </div>
  `
})

子组件的模板字符串中，"<slot></slot>" 节点的下面有 "<h3>slot 默认内容</h3>" 子节点，这个 h3 节点是这个 slot 节点的后备内容。

2-1，子节点的抽象语法树

该子节点的抽象语法树如下所示：

2-2，子节点的代码字符串

子节点的代码字符串如下所示：

with(this){
  return _c(
    'div',
    {staticClass:"hello_world"},
    [
      _c('h2',[_v("我是 HelloWorld 组件")])
      ,_v(" "),
      _t(
        "default",
        [_c('h3',[_v("slot 默认内容")])]
      )
    ],
    2
  )
}

可以发现 _t 函数有了第二个参数 [_c('h3',[_v("slot 默认内容")])]，这正好对应 <slot> 节点的后备内容，接下来看 renderSlot 函数。

2-3，renderSlot

export function renderSlot (
  name: string,
  fallback: ?Array<VNode>,
  props: ?Object,
  bindObject: ?Object
): ?Array<VNode> {
  const scopedSlotFn = this.$scopedSlots[name]
  if (scopedSlotFn) { // scoped slot
    ......
  } else {
    // 从 this.$slots 对象中获取指定插槽的数组，在这里 name == "default"
    const slotNodes = this.$slots[name]
    // warn duplicate slot usage
    if (slotNodes && process.env.NODE_ENV !== 'production') {
      slotNodes._rendered && warn(
        `Duplicate presence of slot "${name}" found in the same render tree ` +
        `- this will likely cause render errors.`,
        this
      )
      slotNodes._rendered = true
    }
    // 将 slotNodes 返回，如果 slotNodes 不存在的话，则返回 fallback
    // fallback 是 VNode 节点的数组，是当前处理 <slot> 的后备内容
    return slotNodes || fallback
  }
}

renderSlot 函数的最后一行可以发现，如果 slotNodes 不存在的话，则返回 fallback，这个 fallback 就是 slot 后备内容的 vnode。

2-4，子组件的 vnode

子组件最终生成的 vnode 如下所示：

页面渲染的效果见下图：

3，具名插槽

对应的文档点击这里。

如果已经理解了普通插槽的话，那理解具名插槽也就非常简单了，它们之间并没有什么本质的区别，我们直接以一个简单的例子进行讲解。

Vue.component('hello-world', {
  template: `
    <div class="hello_world">
      <h2>我是 HelloWorld 组件</h2>
      <slot name="header"></slot>
      <slot></slot>
      <slot name="footer"></slot>
    </div>
  `,
  methods: {}
})

new Vue({
  el: '#app',
  data() {
    return {}
  },
  methods: {},
  template: `
    <div class="app_container">
      <h1>我是APP</h1>
      <hello-world>
        <template v-slot:header>
          <h3>header slot</h3>
        </template>
        <template v-slot:default>
          <h4>default slot</h4>
        </template>
        <template v-slot:footer>
          <h5>footer slot</h5>
        </template>
      </hello-world>
    </div>
  `
})

该例子渲染的页面如下所示：

3-1，子组件实例的 $slots 属性

可以发现，子组件实例的 $slots 属性是一个对象，并且该对象里面有三个属性，分别对应默认插槽的内容、header插槽的内容、footer插槽的内容。在这里，和第一小节的普通插槽并没有什么本质的区别，只不过 $slots 属性对象中的内容多了两条而已。

3-2，子组件的 render 函数

 子组件的 render 函数如下所示：

with(this){
  return _c(
    'div',
    {staticClass:"hello_world"},
    [
      _c('h2',[_v("我是 HelloWorld 组件")]),
      _v(" "),
      _t("header"),
      _v(" "),
      _t("default"),
      _v(" "),
      _t("footer")
    ],
    2
  )
}

子组件模板中的三个 slot。

<slot name="header"></slot>
<slot></slot>
<slot name="footer"></slot>

分别对应。

_t("header"),
_t("default"),
_t("footer")

 _t 是 renderSlot 函数的别名，借助该函数，可以从 vm.$slots 对象中获取指定 slot 应该渲染的 vnode。

3-3，子组件最终的 vnode

在最终得到的 vnode 中，可以发现，子组件模板中的三个 <slot></slot> 已经被转换成了 <h3></h3>、<h4></h4>、<h5></h5>。接下来，进行 patch 操作，渲染到页面上即可。

4，作用域插槽

对应的文档点击这里。

上面的插槽都有一个共同的特点，就是组件子节点的 vnode 都是在父组件 render 函数执行时生成的。在这一点上，作用域插槽和它们完全不同，在父组件 render 函数执行获取的 vnode 中，使用了作用域插槽的组件子节点被编译成了一个函数，保存在子组件 vnode 节点的 data.scopedSlots 对象中。当子组件的 Vue 实例创建出来后，这个函数被保存在 vm.$scopedSlots 对象中，我们以一个例子进行讲解，就很好懂了，例子代码如下：

Vue.component('hello-world', {
  template: `
    <div class="hello_world">
      <h2>我是 HelloWorld 组件</h2>
      <slot v-bind:user="user"></slot>
    </div>
  `,
  data() {
    return {
      user: {
        name: 'tom'
      }
    }
  },
  methods: {}
})

new Vue({
  el: '#app',
  data() {
    return {}
  },
  methods: {},
  template: `
    <div class="app_container">
      <h1>我是APP</h1>
      <hello-world>
        <template v-slot:default="slotProps">
          <h3>{{slotProps.user.name}}</h3>
        </template>
      </hello-world>
    </div>
  `
})

该例子渲染出来的页面如下所示：

4-1，子组件的 vue 实例以及作用域插槽节点编译成的函数

父组件的 vnode 生成之后，会进行 patch 操作，patch 处理到子节点 vnode 时，会进行子组件实例的初始化，在我们这个例子中，子组件的实例如下所示：

在这个子组件的实例中，与本节有关的是 $scopedSlots 属性，该属性是一个对象，对象的 key 是插槽的名称，对象的 value 是一个函数，我们看看这个函数的函数体。

function(slotProps){
  return [
    _c(
      'h3',
      [_v(_s(slotProps.user.name))]
    )
  ]
}

该函数有一个参数，参数的名称是 "slotProps"，该名称取自 <template v-slot:default="slotProps">，这个函数的作用是创建并返回 h3 vnode 节点，并且 h3 节点中的文本取自 slotProps.user.name。

好了，至此我们知道了使用作用域插槽的节点会被编译成一个函数，并且这个函数会被保存到 vm.$scopedSlots 属性中，接下来看子组件的 render 函数。

4-2，子组件的 render 函数

本例子中，子组件的 render 函数如下所示：

with(this){
  return _c(
    'div',
    {staticClass:"hello_world"},
    [
      _c('h2',[_v("我是 HelloWorld 组件")]),
      _v(" "),
      _t("default",null,{"user":user})
    ],
    2
  )
}

与作用域插槽有关的部分是：

_t("default",null,{"user":user})

接下来看 renderSlot 函数。

4-3，renderSlot

如果是作用域插槽的话，会执行到 if(){} 分支，该分支很简单，将 props 作为参数执行 scopedSlotFn 函数，并将该函数的返回值 return 出去即可。

export function renderSlot (
  name: string,
  fallback: ?Array<VNode>,
  props: ?Object,
  bindObject: ?Object
): ?Array<VNode> {
  // 从 vm.$scopedSlots 中获取指定插槽对应的函数，在这里 name = "default"
  const scopedSlotFn = this.$scopedSlots[name]
  if (scopedSlotFn) { // scoped slot
    // 作用域插槽 代码执行到这里
    props = props || {}

    // 将 props 作为参数执行 scopedSlotFn 函数，并将函数的返回值 return 出去
    // scopedSlotFn 函数的作用是创建并返回作用域插槽中节点的 vnode。
    return scopedSlotFn(props) || fallback
  } else {
    ......
  }
}

4-4，子节点最终的 vnode

子节点最终的 vnode 如下所示：

可以看到子组件中的 <slot v-bind:user="user"></slot> 最终被转换成了 <h3>tom</h3>。

纷飞丿
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue源码分析-插槽原理
yyzzabc123的博客
10-18 236
至此，一个完整且简单的插槽流程分析完毕。接下来看插槽深层次的用法。
从源码看vue(v2.7.10)中的slot的原理
qq_35094120的博客
10-27 602
我们在组件里面写的会被渲染成一个对象，该对象里面的参数就是header后面的值，template里面的表达式就是函数返回值，header会被当做函数的key。当渲染到时，会先根据name找到key为header函数，然后将props的值{user:'王哥'}当做参数传给该函数并执行返回一个vnode。
vue slot：为什么 $slots 无值而 $scopedSlots 有值？
最新发布
qq_35436516的博客
07-18 374
在 Vue.js 中，$slots 和 $scopedSlots 是组件实例上用于访问插槽内容的两个属性，但它们各自有不同的用途和表现方式，特别是在处理作用域插槽（scoped slots）时。
【精讲】vue框架 具名插槽、作用域插槽、默认插槽（内含所有源码）
m0_59505309的博客
08-11 569
【精讲】vue框架 具名插槽、作用域插槽、默认插槽
Vue源码解析-了解vue插槽slot篇
weixin_33681778的博客
06-16 657
1.从简单的匿名插槽开始 Vue.component('button-counter', { template: '<div> <slot>我是默认内容</slot></div>' }) 复制代码new Vue({ el: '#app', template: '<button-counter><span>我是slot传...
Vue作用域插槽
鸟人的博客
07-25 567
Vue中如果想要父组件使用子组件属性，可以使用作用域插槽。
Vue2.x 源码 -slot
weixin_43299180的博客
12-31 1303
上一篇：Vue2.x 源码 - 异步组件 Vue 的组件提供了⼀个⾮常有⽤的特性 —— slot 插槽，它让组件的实现变的更加灵活。我们平时在 开发组件库的时候，为了让组件更加灵活可定制，经常⽤插槽的⽅式让⽤户可以⾃定义内容。 插槽分为：默认插槽、匿名插槽 、命名插槽 和 作⽤域插槽，它们可以解决不同的场景，但它是怎么实现的呢，下⾯我们就从源码的⾓ 度来分析插槽的实现原理。 Vue 2.6.0之后采用全新v-slot语法取代之前的slot、slot-scope 文章目录默认插槽匿名插槽命名插槽作用域插槽.
vue源码解析.zip
05-13
7. **插槽和动态组件**：Vue的`<slot>`元素用于组件间的通信，动态组件则允许在运行时切换不同的组件实例。 8. **指令实现**：Vue的内置指令如`v-if`、`v-for`、`v-bind`等，它们的定义和执行流程。 9. **状态管理...
vue-source-code:vue源码阅读-vue source code
03-24
Vue.js 是一款非常流行的前端JavaScript框架，其设计思想是组件化和声明式编程。...这个压缩包中的"vue-source-code-master"文件可能包含了Vue源码的解析和分析，对于想要深入研究Vue的人来说，是一份宝贵的资源。
Vue全家桶技术+商城项目实战+源码解析
07-01
第五章Vue全家桶开发商城项目（不用多说，整合前四章内容充分运用到项目实战中）第六章Vue的源码解析(说白了，让你很好的应对面试官的问题) 看者懂我也，价格合适，希望能给你们在未来的找工作或者已工作的童鞋带来...
vue-docs:Vue原始码解析文档-源码解析
03-24
在这个"Vue原始码解析文档-源码解析"中，我们将深入探讨Vue的核心机制和设计思想，以便更好地理解和利用这个框架。 1. **响应式系统**： Vue的响应式系统基于数据劫持和发布订阅模式。它通过`Object....
深入浅析Vue中的slots/scoped slots
08-27
主要介绍了Vue中的slots/scoped slots,本文实例代码相结合的形式给大家介绍了slots的工作原理，需要的朋友可以参考下
Vue3 源码解读系列（十一）——插槽 slot
Jackson_Mseven的博客
11-20 293
把父组件中编写的插槽内容保存到一个对象上，并且把具体渲染 DOM 的代码用函数的方式封装，然后在子组件渲染的时候，根据插槽名在对象中找到对应的函数，然后执行这些函数做真正的渲染。插槽的实现实际上就是一种。
Vue源码之 slot
weixin_30628077的博客
06-02 100
比如下面这种写法 <template> 　　<div> 　　　　<shop><div>金拱门</div></shop> 　　</div> </template> 金拱门三个字是显示不出来的，显示的会是shop组件的template的内容。但是我们用elemen...
Vue scopedSlots
weixin_42201346的博客
11-11 411
添加链接描述
Vue进阶--01--vm.$scopedSlots和vm.$slots的理解和基本使用
热门推荐
赵天铭的博客
04-11 1万+
官方定义 vm.$slots 类型：{[name: string]: ?Array<VNode>} 只读 详细： 用来访问被插槽分发的的内容。每个具名插槽有其相应的属性。default属性包括了所有没有被包含在具名插槽中的节点或v-slot:default的内容 在使用渲染函数书写一个组件时，访问vm.slots最有帮助。 vm.$scopedSlots 类型：{[...
vue slot scope使用_vue 深度长文之slot 篇
weixin_39790760的博客
11-25 1045
今天我们将分析我们经常使用的 vue 功能 slot 是如何设计和实现的，本文将围绕 普通插槽 和 作用域插槽 以及 vue 2.6.x 版本的 v-slot 展开对该话题的讨论。当然还不懂用法的同学建议官网先看看相关 API 先。接下来，我们直接进入正文吧普通插槽首先我们看一个我们对于 slot 最常用的例子然后我们直接使用，页面则正常显示一下内容然后，这个时候我们使用的时候，对 slot 内容...
Vue.js 你需要知道的 scopedSlots
weixin_34377919的博客
02-19 948
面试官：Vue如何在 Jsx 中使用 scopedSlots ? 自己先想一分钟。 早先我在 Vue.js 你不知道的一些小技巧 一文中简单介绍过 scopedSlots 的使用场景，但不是很详细。群里也有好多同学问关于 scopedSlots 如何使用，当然自己也有点小生疏。今天借此机会重新梳理下，以便日后学习之用。文笔有限，有不对或阐述有误的地方希望留言斧正！ 谁可以看？ 本文针对有下面...
Vue源码解析011：入门与runtime理解
在本篇Vue源码解析文章中，我们将深入探讨03 Vue源码剖析第11章的内容，主要围绕目标环境的搭建、源码学习方法以及Vue的初始化过程进行讲解。首先，为了进行源码研究，你需要从官方GitHub仓库克隆Vue项目...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值