Vue
初始化阶段会在构造器的components
属性添加三个组件对象,每个组件对象的写法和我们在自定义组件过程的写法一致,有render
函数,有生命周期,也会定义各种数据。
最终Vue
构造器拥有了三个组件的配置选项。
关键的两步一个是var res = Object.create(parentVal || null);
,它会以为原型创建一个空对象,最后是通过extend
将用户自定义的component
选项复制到空对象中。选项合并之后,内置组件也因此在全局完成了注册。
这节我们详细的介绍了动态组件的原理,我们经常使用<component :is="">
以达到不同组件切换的目的,实际上是由于is
这个关键字让模板编译成render
函数时,组件render
的标签是变量,这样在渲染阶段,随着数据的不同会渲染不同的组件。动态组件还有一种用法是使用内联模板去访问子组件的数据,这又增加了一种子父组件通信的方法。但是官方并不建议我们这样做,因为内联模板会让作用域变得混乱。内联组件实现父子通信的原理是它让父组件的编译过程放到了子组件,这样顺利成章的父组件就可以访问到子组件的变量。文章的最后引出了内置组件,Vue
中真正的内置组件只有keep-alive, transition, transition-group
三种,他们本质上是在内部定义好组件选项,并进行全局注册。下一节,我们将进入内置组件的深度分析。