浅谈Vue插槽实现原理

目录
  • 一、样例代码
  • 二、透过现象看本质
  • 三、实现原理
  • 四、父组件编译阶段
  • 五、父组件生成渲染方法
  • 六、父组件生成VNode
  • 七、子组件状态初始化
  • 八、子组件编译阶段
  • 九、子组件生成渲染方法
  • 十、使用技巧
    • 10.1、具名插槽
    • 10.2、作用域插槽

一、样例代码

<!-- 子组件comA -->
<template>
  <div class='demo'>
    <slot><slot>
    <slot name='test'></slot>
    <slot name='scopedSlots' test='demo'></slot>
  </div>
</template>
<!-- 父组件 -->
<comA>
  <span>这是默认插槽</span>
  <template slot='test'>这是具名插槽</template>
  <template slot='scopedSlots' slot-scope='scope'>这是作用域插槽(老版){{scope.test}}</template>
  <template v-slot:scopedSlots='scopeProps' slot-scope='scope'>这是作用域插槽(新版){{scopeProps.test}}</template>
</comA>

二、透过现象看本质

插槽的作用是实现内容分发,实现内容分发,需要两个条件:

  • 占位符
  • 分发内容

组件内部定义的slot标签,我们可以理解为占位符,父组件中插槽内容,就是要分发的内容。插槽处理本质就是将指定内容放到指定位置。废话不多说,从本篇文章中,将能了解到:

  • 插槽的实现原理
  • render方法中如何使用插槽

三、实现原理

vue组件实例化顺序为:父组件状态初始化(datacomputedwatch...) --> 模板编译 --> 生成render方法 --> 实例化渲染watcher --> 调用render方法,生成VNode --> patch VNode,转换为真实DOM --> 实例化子组件 --> ......重复相同的流程 --> 子组件生成的真实DOM挂载到父组件生成的真实DOM上,挂载到页面中 --> 移除旧节点

从上述流程中,可以推测出:

1.父组件模板解析在子组件之前,所以父组件首先会获取到插槽模板内容

2.子组件模板解析在后,所以在子组件调用render方法生成VNode时,可以借助部分手段,拿到插槽的VNode节点

3.作用域插槽可以获取子组件内变量,因此作用域插槽的VNode生成,是动态的,即需要实时传入子组件的作用域scope

整个插槽的处理阶段大致分为三步:

  • 编译
  • 生成渲染模板
  • 生成VNode

以下面代码为例,简要概述插槽运转的过程。

<div id='app'>
  <test>
    <template slot="hello">
      123
    </template>
  </test>
</div>
<script>
  new Vue({
    el: '#app',
    components: {
      test: {
        template: '<h1>' +
          '<slot name="hello"></slot>' +
          '</h1>'
      }
    }
  })
</script>

四、父组件编译阶段

编译是将模板文件解析成AST语法树,会将插槽template解析成如下数据结构:

{
  tag: 'test',
  scopedSlots: { // 作用域插槽
    // slotName: ASTNode,
    // ...
  }
  children: [
    {
      tag: 'template',
      // ...
      parent: parentASTNode,
      children: [ childASTNode ], // 插槽内容子节点,即文本节点123
      slotScope: undefined, // 作用域插槽绑定值
      slotTarget: "\"hello\"", // 具名插槽名称
      slotTargetDynamic: false // 是否是动态绑定插槽
      // ...
    }
  ]
}

五、父组件生成渲染方法

根据AST语法树,解析生成渲染方法字符串,最终父组件生成的结果如下所示,这个结构和我们直接写render方法一致,本质都是生成VNode, 只不过_chthis.$createElement的缩写。

with(this){
  return _c('div',{attrs:{"id":"app"}},
  [_c('test',
    [
      _c('template',{slot:"hello"},[_v("\n      123\n    ")])],2)
    ],
  1)
}

六、父组件生成VNode

调用render方法,生成VNode,VNode具体格式如下:

{
  tag: 'div',
  parent: undefined,
  data: { // 存储VNode配置项
    attrs: { id: '#app' }
  },
  context: componentContext, // 组件作用域
  elm: undefined, // 真实DOM元素
  children: [
    {
      tag: 'vue-component-1-test',
      children: undefined, // 组件为页面最小组成单元,插槽内容放放到子组件中解析
      parent: undefined,
      componentOptions: { // 组件配置项
        Ctor: VueComponentCtor, // 组件构造方法
        data: {
          hook: {
            init: fn, // 实例化组件调用方法
            insert: fn,
            prepatch: fn,
            destroy: fn
          },
          scopedSlots: { // 作用域插槽配置项,用于生成作用域插槽VNode
            slotName: slotFn
          }
        },
        children: [ // 组件插槽节点
          tag: 'template',
          propsData: undefined, // props参数
          listeners: undefined,
          data: {
            slot: 'hello'
          },
          children: [ VNode ],
          parent: undefined,
          context: componentContext // 父组件作用域
          // ...
        ]
      }
    }
  ],
  // ...
}

vue中,组件是页面结构的基本单元,从上述的VNode中,我们也可以看出,VNode页面层级结构结束于test组件,test组件children处理会在子组件初始化过程中处理。子组件构造方法组装与属性合并在vue-dev\src\core\vdom\create-component.js createComponent方法中,组件实例化调用入口是在vue-dev\src\core\vdom\patch.js createComponent方法中。

七、子组件状态初始化

实例化子组件时,会在initRender -> resolveSlots方法中,将子组件插槽节点挂载到组件作用域vm中,挂载形式为vm.$slots = {slotName: [VNode]}形式。

八、子组件编译阶段

子组件在编译阶段,会将slot节点,编译成以下AST结构:

{
  tag: 'h1',
  parent: undefined,
  children: [
    {
      tag: 'slot',
      slotName: "\"hello\"",
      // ...
    }
  ],
  // ...
}

九、子组件生成渲染方法

生成的渲染方法如下,其中_trenderSlot方法的简写,从renderSlot方法,我们就可以直观的将插槽内容与插槽点联系在一起。

// 渲染方法
with(this){
  return _c('h1',[ _t("hello") ], 2)
}
// 源码路径:vue-dev\src\core\instance\render-helpers\render-slot.js
export function renderSlot (
  name: string,
  fallback: ?Array<VNode>,
  props: ?Object,
  bindObject: ?Object
): ?Array<VNode> {
  const scopedSlotFn = this.$scopedSlots[name]
  let nodes
  if (scopedSlotFn) { // scoped slot
    props = props || {}
    if (bindObject) {
      if (process.env.NODE_ENV !== 'production' && !isObject(bindObject)) {
        warn(
          'slot v-bind without argument expects an Object',
          this
        )
      }
      props = extend(extend({}, bindObject), props)
    }
    // 作用域插槽,获取插槽VNode
    nodes = scopedSlotFn(props) || fallback
  } else {
    // 获取插槽普通插槽VNode
    nodes = this.$slots[name] || fallback
  }

  const target = props && props.slot
  if (target) {
    return this.$createElement('template', { slot: target }, nodes)
  } else {
    return nodes
  }
}

作用域插槽与具名插槽区别

<!-- demo -->
<div id='app'>
  <test>
      <template slot="hello" slot-scope='scope'>
        {{scope.hello}}
      </template>
  </test>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        components: {
            test: {
                data () {
                    return {
                        hello: '123'
                    }
                },
                template: '<h1>' +
                    '<slot name="hello" :hello="hello"></slot>' +
                  '</h1>'
            }
        }
    })

</script>

作用域插槽与普通插槽相比,主要区别在于插槽内容可以获取到子组件作用域变量。由于需要注入子组件变量,相比于具名插槽,作用域插槽有以下几点不同:

作用域插槽在组装渲染方法时,生成的是一个包含注入作用域的方法,相对于createElement生成VNode,多了一层注入作用域方法包裹,这也就决定插槽VNode作用域插槽是在子组件生成VNode时生成,而具名插槽是在父组件创建VNode时生成。_uresolveScopedSlots,其作用为将节点配置项转换为{scopedSlots: {slotName: fn}}形式。

with (this) {
        return _c('div', {
            attrs: {
                "id": "app"
            }
        }, [_c('test', {
            scopedSlots: _u([{
                key: "hello",
                fn: function(scope) {
                    return [_v("\n        " + _s(scope.hello) + "\n      ")]
                }
            }])
        })], 1)
    }

子组件初始化时会处理具名插槽节点,挂载到组件$slots中,作用域插槽则在renderSlot中直接被调用

除此之外,其他流程大致相同。插槽作用机制不难理解,关键还是模板解析与生成render函数这两步内容较多,流程较长,比较难理解。

十、使用技巧

通过以上解析,能大概了解插槽处理流程。工作中大部分都是用模板来编写vue代码,但是某些时候模板有一定的局限性,需要借助于render方法放大vue的组件抽象能力。那么在render方法中,我们插槽的使用方法如下:

10.1、具名插槽

插槽处理一般分为两块:

  • 父组件:父组件只需要写成模板编译成的渲染方法即可,即指定插槽slot名称
  • 子组件:由于子组件时直接拿父组件初始化阶段生成的VNode,所以子组件只需要将slot标签替换为父组件生成的VNode,子组件在初始化状态时会将具名插槽挂载到组件$slots属性上。
<div id='app'>
<!--  <test>-->
<!--    <template slot="hello">-->
<!--      123-->
<!--    </template>-->
<!--  </test>-->
</div>
<script>
  new Vue({
    // el: '#app',
    render (createElement) {
      return createElement('test', [
        createElement('h3', {
          slot: 'hello',
          domProps: {
            innerText: '123'
          }
        })
      ])
    },
    components: {
      test: {
        render(createElement) {
          return createElement('h1', [ this.$slots.hello ]);
        }
        // template: '<h1>' +
        //   '<slot name="hello"></slot>' +
        //   '</h1>'
      }
    }
  }).$mount('#app')
</script>

10.2、作用域插槽

作用域插槽使用比较灵活,可以注入子组件状态。作用域插槽 + render方法,对于二次组件封装作用非常大。举个栗子,在对ElementUI table组件进行基于JSON数据封装时,作用域插槽用处就非常大了。

<div id='app'>
<!--  <test>-->
<!--    <span slot="hello" slot-scope='scope'>-->
<!--      {{scope.hello}}-->
<!--    </span>-->
<!--  </test>-->
</div>
<script>
  new Vue({
    // el: '#app',
    render (createElement) {
      return createElement('test', {
        scopedSlots:{
          hello: scope => { // 父组件生成渲染方法中,最终转换的作用域插槽方法和这种写法一致
            return createElement('span', {
              domProps: {
                innerText: scope.hello
              }
            })
          }
        }
      })
    },
    components: {
      test: {
        data () {
          return {
            hello: '123'
          }
        },
        render (createElement) {
          // 作用域插槽父组件传递过来的是function,需要手动调用生成VNode
          let slotVnode = this.$scopedSlots.hello({ hello: this.hello })
          return createElement('h1', [ slotVnode ])
        }
        // template: '<h1>' +
        //   '<slot name="hello" :hello="hello"></slot>' +
        //   '</h1>'
      }
    }
  }).$mount('#app')

</script>

以上就是浅谈Vue插槽实现原理的详细内容,更多关于Vue插槽的资料请关注我们其它相关文章!

(0)

相关推荐

  • vue学习笔记之slot插槽用法实例分析

    本文实例讲述了vue slot插槽用法.分享给大家供大家参考,具体如下: 不使用插槽,在template中用v-html解析父组件传来的带有标签的content <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js&q

  • vue中的 $slot 获取插槽的节点实例

    vue 中的 $slot 以前一直不知到这个东西,后来发现 vue api 中 藏着很多的 很神奇的 api,比如这个 具名插槽很好理解,但是那个 default 就有点难了, 写了一个炒鸡简单的 demo father: <template> <div> <button @click="getSlot">getSlot</button> <try ref="try"> <div class=&quo

  • 使用react context 实现vue插槽slot功能

    首先来看下vue的slot的实现 <base-layout>组件,具名插槽name定义以及默认插槽 <div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot n

  • Vue匿名插槽与作用域插槽的合并和覆盖行为

    Vue 测试版本:Vue.js v2.5.13 Vue 文档: <slot> 元素可以用一个特殊的特性 name 来进一步配置如何分发内容.多个插槽可以有不同的名字.具名插槽将匹配内容片段中有对应 slot 特性的元素. 仍然可以有一个匿名插槽,它是默认插槽,作为找不到匹配的内容片段的备用插槽. 具体应用的时候: 1.匿名插槽的合并行为: <div id="app"> <myele> <div> default slot </div

  • 详解Vue中使用插槽(slot)、聚类插槽

    一.基本的插槽 这里总结两点 如果不在子组件中使用插槽(slot),那么在子组件中写任何代码都是无效的的,不会显示 (插槽默认值)如果子组件中没有插入任何代码的话就会显示组件插槽中的内容 slot 代表父组件往子组件中 插入的标签 这里就代表组件子组件中的 <p>Dell</p> <child> <p>Dell</p> </child> 这里如果是这样的 <child> </child> 就会显示 <sl

  • vue学习笔记之作用域插槽实例分析

    本文实例讲述了vue学习笔记之作用域插槽.分享给大家供大家参考,具体如下: <child></child> Vue.component('child', { data: function () { return { list: [1, 2, 3] } }, template: '<div> <ul> <li v-for="item of list">{{item}}</li> </ul> </di

  • 详解Vue 匿名、具名和作用域插槽的使用方法

    Vue 中的插槽在开发组件的过程中其实是非常重要并且好用的.Vue 的插槽也没有说很难使用,这篇文章简明扼要的介绍了三种插槽的用法. 匿名插槽 子组件定义 slot 插槽,但并未具名,因此也可以说是默认插槽.只要在父元素中插入的内容,默认加入到这个插槽中去.

  • vue插槽slot的理解和使用方法

    前言 Vue的slot插槽,可以从字面意思来了解用途,占用占坑的意思,既然是占坑肯定是先占坑后面有其他具体的内容来替换代替.根据slot的应用场景可以分为匿名slot和具名slot. 一.个人理解及插槽的使用场景 刚开始看教程我的疑惑是为什么要用插槽,它的使用场景是什么,很多解释都是"父组件向子组件传递dom时会用到插槽",这并不能很好的解决我的疑惑.既然你用了子组件,你为什么要给她传一些dom,直接去定义复用的子组件不就好了.后来想想觉得一个复用的组件在不同的地方只有些许变化,如果去

  • vue学习笔记之slot插槽基本用法实例分析

    本文实例讲述了vue学习笔记之slot插槽基本用法.分享给大家供大家参考,具体如下: 不使用插槽,在template中用v-html解析父组件传来的带有标签的content <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vu

  • 浅析vue插槽和作用域插槽的理解

    插槽: 插槽,也就是slot,是组件的一块HTML模板,这块模板显示不现实.以及怎样显示由父组件来决定. 插槽模板是slot,它是一个空壳子,因为它显示与隐藏以及最后用什么样的html模板显示由父组件控制.但是插槽显示的位置由子组件自身决定,slot写在组件template的哪块,父组件传过来的模板将来就显示在哪块.这样就使组件可复用性更高,更加灵活.我们可以随时通过父组件给子组件加一些需要的东西. 这个可以参考https://www.jb51.net/article/160047.htm.这位

随机推荐