页面拆分，复杂-》 简单，积木，组件-》组件树

组件使用

组件构造器创建组件

vue.extend({})

• 调用组件构造器创建组件对象，参数为对象，
• 其中主要用到template属性，值为模板字符串形式，字符串内容就是想要展示的html代码片段,注意必须有一个父元素，否则只显示第一个dom元素
• vue2.*用语法糖代替这一些法

注册组件

- Vue.component(表签名, 构造器创建的组件引用)

• Vue实例化之后就存在了该组件
• 全局组件

在vue范围内使用组件

必须在vue挂在的id dom元素下，才能使用自定义组件

全局组件与局部组件

全局组件，是通过Vue.component(标签， 组件)创建的，在实例化的多个Vue中都能使用。

如图，组件在id=app和id=app2中都能使用

局部组件，是在实例化Vue的时候，通过components注册的，只在实例化的el范围中生效

如图，组件是在实例化el为app的元素中注册的，所以其旨在app范围内生效，而在app2中当做了普通标签，无法进一步解析

备注

开发中，局部组件居多，且只有一个vue实例