Vue使用日记（5）：Vue组件化理解（一）

Vue组件化开发

        组件化是Vue.js中的重要思想，任何应用都可以拆分成一个个组件进行管理和复用，如果将整个应用比喻成一棵树，那么这个应用会自上而下被拆分成独立的模块，形成一棵“组件树”。

注册组件的基本步骤：

1）创建组件构造器：调用Vue.extends()创建组件构造器；

2）注册组件：调用Vue.component()注册组件；

3）使用组件：在Vue实例作用范围内使用组件。

这里以下载引入vue.js的方式使用Vue，后续会继续说明使用Vue脚手架cli创建项目的方式。

这里对每一个步骤所代表什么含义做一个说明

1）Vue.extend()：

调用Vue.extend()创建一个组件构造器。在创建组件构造器时传入的template模板，就是在使用到组件的地方（component-name），要显示的HTML代码。

这种创建的写法在Vue2.x的文档中已经很少见到，但是在很多资料还是会提到这种方式，而且这种方式是学习后面内容的基础。后续会说到创建组件的语法糖。

2）Vue.component()：

调用Vue.component()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的名称，使其像使用div、p、span这些标签一样。所以需要传递两个参数：注册组件的标签名、组件构造器；

3）组件必须挂载在某个Vue实例下，否则它不会生效：

第二个地方使用组件不会生效，因为它在new Vue实例挂载的app之外使用。