关于<component :is="xxxx"/>-从tamplate编译到生成vnode

187 阅读1分钟

Vue文件中的

<component :is="com"></component>`

在经过parseHTML会得到这样一个ast语法树对象

{
attrsList: []
attrsMap: {:is: "com"}
children: []
component: "com"
parent: {type: 1, tag: "div", attrsList: Array(1), attrsMap: {…}, rawAttrsMap: {…}, …}
plain: false
rawAttrsMap: {}
static: false
staticRoot: false
tag: "component"
type: 1
}

这个对象经过

generate(ast, options)

这个方法会生成下面的方法,_c就是vue里面的 createElement (这个方法会调用_createElement)方法

_c(_vm.com, { tag: "component" }) //_c就是vue里面的 createElement (这个方法会调用_createElement)方法

在_createElement中,当发现_vm.com不是string类型,会调用createComponent方法,createComponent会利用Vue.extent方法将_vm.com对象扩展成一个VueComponent构造函数,接下来就可以生成vnode了。