## 组件的定义和注册 组件`Component`是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。 ### 写法一 写法一:使用Vue.extend方法定义组件,使用 Vue.component方法注册组件。 代码举例: ```html Document
``` 上方代码中,绿框部分的内容,就是我想定义的整个组件。 运行结果如下: ![](http://img.smyhvae.com/20180422_2230.png) 代码截图如下: ![](http://img.smyhvae.com/20180422_2223.png) 上图中,注意两点: 1、红框部分,要保证二者的名字是一致的。 2、绿框部分,一定要用一个大的根元素(例如`
`)包裹起来。如果我写成下面这样,就没有预期的效果: ``` template: '

登录页面

注册页面

' ``` 结果如下:(并非预期的效果) ![](http://img.smyhvae.com/20180422_2232.png) ### 写法二 写法二:Vue.component方法定义、注册组件(一步到位)。 代码如下: ```html Document
``` 代码截图如下: ![](http://img.smyhvae.com/20180422_2251.png) 上图中,同样注意两点: 1、红框部分,要保证二者的名字是一致的。 2、绿框部分,一定要用一个大的根元素(例如`
`)包裹起来。如果我写成下面这样,就没有预期的效果: ``` template: '

登录页面

注册页面

' ``` 结果如下:(并非预期的效果) ![](http://img.smyhvae.com/20180422_2232.png) ### 写法三【荐】 写法三:将组件内容定义到template标签中去。 代码如下: ```html Document
``` 代码截图如下: ![](http://img.smyhvae.com/20180422_2256.png) 写法三其实和方法二差不多,无非是把绿框部分的内容,单独放在了`