`）包裹起来。如果我写成下面这样，就没有预期的效果：
```
template: '
登录页面
注册页面
'
```
结果如下：（并非预期的效果）
### 写法二
写法二：Vue.component方法定义、注册组件（一步到位）。
代码如下：
```html
Document
```
代码截图如下：
上图中，同样注意两点：
1、红框部分，要保证二者的名字是一致的。
2、绿框部分，一定要用一个大的根元素（例如`
`）包裹起来。如果我写成下面这样，就没有预期的效果：
```
template: '
登录页面
注册页面
'
```
结果如下：（并非预期的效果）
### 写法三【荐】
写法三：将组件内容定义到template标签中去。
代码如下：
```html
Document
登录页面
注册页面
```
代码截图如下：
写法三其实和方法二差不多，无非是把绿框部分的内容，单独放在了`
`标签中而已，这样有利于 html 标签的书写。
## 为组件添加 data 和 method
既然组件是一个页面，那么，页面中可能会有一些功能要**动态展示**。因此，我们有必要为组件添加 data 和 method。
代码举例如下：
```html
Document
```
上方代码所示，我们在`account`组件中添加的data 和 method，其**作用域**只限于`account`组件里，保证独立性。
注意，在为组件添加数据时，data不再是对象了，而是方法，而且要通过 return的形式进行返回；否则，页面上是无法看到效果的。
## 子组件的定义和注册
我们在本文的第一段中，通过`Vue.component`形式定义的是**全局组件**。这一段中，我们来讲一下**子组件**。
比如说，一个`账号`模块是父组件，里面分为`登陆`模块和`注册`模块，这两个模块可以定义为子组件。
需要注意的是，我们在父组件中定义的子组件，只能在当前父组件中使用；在其他的组件，甚至根组件中，都无法使用。
```html
Document
```
显示效果：
20180423_1029.png
## 组件之间的动态切换
我们可以利用` `标签的`:is`参数来进行组件之间的切换。