| 动态组件我相信大部分在开发的过程中都会用到，当我们需要在不同的组件之间进行状态切换时，动态组件可以很好的满足我们的需求，其中的核心是component标签和is属性的使用。
基础描述// vue<div id="app"> <button @click="changeTabs('child1')">child1</button> <button @click="changeTabs('child2')">child2</button> <button @click="changeTabs('child3')">child3</button> <component :is="chooseTabs"> </component></div>// jsvar child1 = { template: '<div>content1</div>',}var child2 = { template: '<div>content2</div>'}var child3 = { template: '<div>content3</div>'}var vm = new Vue({ el: '#app', components: { child1, child2, child3 }, methods: { changeTabs(tab) { this.chooseTabs = tab; } }})
AST解析<component>的解读和前面几篇内容一致，会从AST解析阶段说起，过程也不会专注每一个细节，而是把和以往处理方式不同的地方特别说明。针对动态组件解析的差异，集中在processComponent上，由于标签上is属性的存在，它会在最终的ast树上打上component属性的标志。 // 针对动态组件的解析function processComponent (el) { var binding; // 拿到is属性所对应的值 if ((binding = getBindingAttr(el, 'is'))) { // ast树上多了component的属性 el.component = binding; } if (getAndRemoveAttr(el, 'inline-template') != null) { el.inlineTemplate = true; }}
render函数有了ast树，接下来是根据ast树生成可执行的render函数，由于有component属性，render函数的产生过程会走genComponent分支。 // render函数生成函数var code = generate(ast, options);// generate函数的实现function generate (ast,options) { var state = new CodegenState(options); var code = ast ? genElement(ast, state) : '_c("div")'; return { render: ("with(this){return " + code + "}"), staticRenderFns: state.staticRenderFns }}function genElement(el, state) {
下载地址:
vue项目中使用ts（typescript）入门教程
前端进阶之教你利用javascript存储函数 |
