我们在本文的第一段中，通过Vue.component形式定义的是全局组件。这一段中，我们来讲一下子组件。
比如说，一个账号模块是父组件，里面分为登陆模块和注册模块，这两个晓得模块就可以定义为子组件。
需要注意的是作用域的问题：我们在父组件中定义的子组件，只能在当前父组件的模板中使用；在其他的组件，甚至根组件中，都无法使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue2.5.16.js"></script>
</head>
<body>
<div id="app">
<account>
</account>
</div>
<script>
//定义、注册组件
Vue.component('account', {
template: '<div><h2>账号模块</h2> <login></login></div>',
components: {
'login': {
template: '<h3>登录模块</h3>'
}
}
});
new Vue({
el: '#app'
});
</script>
</body>
</html>
我们发现，既然是定义父亲<account>的子组件，那么，子组件<login>的调用，只能写在父组件<account>的template模板中。
显示效果：
在 Vue 根实例中定义子组件
当然，我们还可以这样做：把整个 Vue 对象当成父亲，这样的话，就可以在 Vue 示例中定义一个子组件。如下：
这样写的话，我们定义的子组件<login>在整个#app区域，都是可以使用的。
上面的代码，还有另外一种写法：（把子组件的模板定义，存放到变量中）【重要】
注意，在定义子组件时，关键字components不要写错了。
我们可以利用<component>标签的:is参数来进行组件之间的切换。
我们要记住：父组件通过属性的形式，向子组件传递数据。
引入：
我们先来看这样一段代码：
上方代码中，我想把父组件里 number 的数值传递给子组件，直接这样写，是看不到效果的：
1、父组件传值给子组件：
要通过 props 属性将number进行传递给子组件才可以。代码如下：
在<counter>标签中，要注意:number里的冒号。加上冒号，那么引号里的内容就是表达式（期望的结果）；否则，引号的内容只是字符串：
2、子组件获取了父组件的数据后，进行求和操作：
上方代码中，子组件已经获取了父组件的两个number，现在要求：每点击一次子组件，在子组件中将数据加 1。
一般人可能会这样写：（不推荐的写法：子组件直接修改父组件中的数据）
上方代码的写法不推荐，因为不建议直接操作父组件中的数据。虽然数据操作成功，但是控制台会报错：
img.png
这样涉及到单向数据流的概念：
父组件可以传递参数给子组件，但是反过来，子组件不要去修改父组件传递过来的参数。因为同一个参数，可能会传递给多个子组件，避免造成修改的冲突。
既然如此，我可以把父组件中的数据，在子组件中创建副本，然后我们去修改这个副本，就不会造成影响了。最终，完整版代码如下：
我们要记住：子组件通过事件触发的形式，向父组件传值。
案例1:子组件给父组件传递数据
案例2：获取子组件的DOM对象
题目：给两个相同的子组件定义计数器，每点击一次，数值加1。然后在父组件中求和。
步骤（1）：给两个相同的子组件定义计数器，每点击一次，数值加1。代码如下：
步骤（2）：两个子组件的数值加 1 后，通知父组件。代码如下：
上方代码中，通过关键字emit通知父组件，子组件里的 addClick 方法被执行了。父组件得知后，执行myMethod()方法（这个方法是在Vue实例中定义的，很好理解）
步骤（3）：在父组件中求和
既然父组件已经得知子组件的 addClick 事件，那我们直接在父组件的myMethod()里定义求和的方法即可。
代码的关键：
在<counter>标签中，通过 ref = "xxx"属性，给各个组件起一个别名，代表组件的引用
在父函数myMethod()中，通过this.$refs.xxx获取组件的引用。我们看一下最后两行代码在控制台的输出便知：（组件里有 number 属性）
