Vue源码之 怎样显示组件节点内部的节点

Posted 2021-12-16 chuliang

比如

<template>
  <child><div>组件节点内部节点</div></child>
</template>

父节点内部有个child组件节点，一般来说，都是在child内部定义子节点，但是也有的需求需要像上面一样，直接写在父组件的template里，像框架比如element框架的很多地方都需要这样做。

那么问题来了，直接这样写是显示不出来的。

原因是父组件根据template生成render函数，接着生成虚拟节点，虚拟节点是不管你是div这种保留节点还是child这种自定义的组件节点，直接按照template生成render函数，形式是 标签-data-子节点数组，

在child这里生成一个vnode就是tag：child，data：（这里没有，如果child标签有属性的话就是有的），子节点数组children:[div的虚拟节点]，所以<div>组件节点内部节点</div>其实是在child的vnode的children属性中，而如果child组件中有自己的template，优先用自己的template生成挂载的el节点，那么如果想显示<div>组件节点内部节点</div>，就需要去掉child内部的template，换成script中自定义的render函数。

render() 
      return (<div>[(<div>this.$slots.default</div>)]</div>)
    

　　问题一：this.$slots是啥？

Vue源码6161行patch方法，在第一次创建child节点的时候，会进入6171行createElm方法，进入5627行的createComponent方法，在5678行调用4213行的init方法，先生成child的vnode对应的vm，生成vm的时候，_init方法中有initRender方法

里面有

vm.$slots = resolveSlots(options._renderChildren, renderContext);

　　这句话，简单理解就是把options._renderChildren数组中的元素放入vm.$slots.default数组中