经过Vue组件的学习,发现Vue组件和我们new Vue实例化的对象有些相似以及不同的地方。
首先相同的地方:
通过new实例化Vue实例对象的时候传入的参数是一个对象,这个对象里面有很多的Vue选项可以使用,比如el,data,computed,methods,components等等
同样的通过Vue.component方式声明的全局组件,它的第二个参数也是一个对象,同样也是里面包含很多可用的选项,data,computed,methods,components等等
不同的地方,组件的data是一个function,组件没有el挂载点这个选项。除了这两点,实际基本上可以将Vue实例与Vue组件等同于一个东西来看待。
可以想象我们平时new Vue的实例对象当作一个根组件,这个根组件内部可以含有子组件,这个根组件位于整个组件树的最上层。然后,我们自己创建的组件,一般可以视为子组件,这些组件可以放到根组件内。另外,还有一些所谓的游离组件,通过new Vue().$mount()的方式挂载到页面上,比如页面右侧的客服悬浮窗,比如一些弹窗等等,不属于整个页面整体主要部分,当然这些游离的组件也可以有它们自己的子组件。
对于SPA单页面应用,URL不发生实际跳转,一般通过路由构建SPA结构,SPA的根组件就变成这个应用的组件树的始祖,所以也就是一般意义上SPA只有一个根组件。
所以,可以理解成整个页面是由多个层级的组件构成的,亦或是多个Vue实例组合而成。