子组件的定义和注册
我们在本文的第一段中，通过Vue.component形式定义的是全局组件。这一段中，我们来讲一下子组件。
在父组件中定义子组件
比如说，一个账号模块是父组件，里面分为登陆模块和注册模块，这两个晓得模块就可以定义为子组件。
需要注意的是作用域的问题：我们在父组件中定义的子组件，只能在当前父组件的模板中使用；在其他的组件，甚至根组件中，都无法使用。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| <!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 示例中定义一个子组件。如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| <!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">
<login> </login>
</div>
<script>
new Vue({
el: '#app',
components: {
'login': {
template: '<h3>登录模块</h3>'
}
}
});
</script>
</body>
</html>
|
这样写的话，我们定义的子组件<login>在整个#app区域，都是可以使用的。
上面的代码，还有另外一种写法：（把子组件的模板定义，存放到变量中）【重要】
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| <!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">
<login> </login>
</div>
<script>
var myLogin = {
template: '<h3>登录模块</h3>'
}
new Vue({
el: '#app',
components: {
'login': myLogin
}
});
</script>
</body>
</html>
|
注意，在定义子组件时，关键字components不要写错了。
组件之间的动态切换（暂略）
我们可以利用<component> 标签的:is参数来进行组件之间的切换。
父组件向子组件传递数据
我们要记住：父组件通过属性的形式，向子组件传递数据。
引入：
我们先来看这样一段代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| <!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&g |