How Vue source node inside of the display component node

such as

<Template> 
  <Child> <div> node assembly internal node </ div> </ Child> 
</ Template>

Internal components of the parent node has a child node, in general, are the definition of child nodes within the child, but also some demand needs as above, write directly in template's parent component, such as the frame element in many parts of the framework are required this way.

So the question is, is directly written out of the show.

The reason is that:

Generating a virtual parent node assembly, each element in the form of a child array in the tag -data- child array, such as the virtual node is the child {tag: child, data :( there is no, if the child has a property tag, then there is ), children: [div node's virtual]}, so <div> node assembly internal node </ div> children property is in fact a virtual node,

If you have your own template child components, the priority with their own template to generate the actual node, sub-node children neglected properties.

(Note: a node generating a virtual three methods: According el, according to the template, in accordance with direct render function)

So if you want to show children in child nodes, you need to remove the template child inside, and replaced render a custom script function, such as written as follows (elementui wording, as to why this writing, we do not know, nor dare), generating a real node render function.

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

　　One problem:. This $ slots.default is what?

6161 Vue source line patch method (this time the method is invoked patch update method watcher in the parent assembly), the first time to create a cycle of child node is found from createElm 6208 line all the way createChildren, call createElm to create a child node because the component is a child node, the method enters createComponent line 5627, line 4213 calls the init method in line 5678 (this node is a component on a dedicated data initialization method to mount, and the following method is not the same _init) , vm, vm generated when, vm._init initRender method has a method for generating child objects of VueComponent

it's inside

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

　　This sentence, simple understanding is the options._renderChildren array element into vm. $ Slots.default array

So _renderChildren what is? In _init method, there is a initInternalComponent before initRender method, which is found in the children of property parentVnode.componentOptions, parentVnode is options._parentVnode, go back to look for options, where _init init method is said above 4213 line method, call createComponentInstanceForVnode ----> new vnode.componentOptions.Ctor, options._parentVnode here is passed vnode, the vnode is child corresponding virtual node,

Then the vnode of children in componentOptions property where? That method _c going vnode generated when the see, _c 4586 line has been down point, line 4517, createComponent

var vnode = new VNode(
            ("vue-component-" + (Ctor.cid) + (name ? ("-" + name) : '')),
            data, undefined, undefined, undefined, context,
            { Ctor: Ctor, propsData: propsData, listeners: listeners, tag: tag, children: children },
            asyncFactory
        );

　　

Comparative VNode constructor is found componentOptions {Ctor: Ctor, propsData: propsData, listeners: listeners, tag: tag, children: children} object, children: children, the children are createComponent parameter, in fact parent component generated

Internal child node when the child is of the vnode <div> component nodes internal node </ div> virtual node array.