11-Vue组件的定义和注册

前言

什么是组件

组件：
组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。

模块化和组件化的区别

  • 模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一

  • 组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用

全局组件的定义和注册

组件Component是 Vue.js 最强大的功能之一。组件可以扩展 HTML
元素，封装可重用的代码。

全局组件的定义和注册有三种方式，我们接下来讲一讲。

写法一

写法一：使用Vue.extend方法定义组件，使用 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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!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">

<!-- 如果要使用组件，直接把组件的名称，以 HTML
标签的形式，引入到页面中，即可 -->

<account> </account>

</div>

<script>

//第一步：使用 Vue.extend 定义组件

var myAccount = Vue.extend({

template: '<div><h2>登录页面</h2> <h3>注册页面</h3></div>' //
通过 template 属性，指定了组件要展示的HTML结构。template 是 Vue
中的关键字，不能改。

});

//第二步：使用 Vue.component 注册组件

// Vue.component('组件的名称', 创建出来的组件模板对象)

Vue.component('account', myAccount);
//第一个参数是组件的名称（标签名），第二个参数是模板对象

new Vue({

el: '#app'

});

</script>

</body>

</html>

上方代码中，在注册组件时，第一个参数是标签名，第二个参数是组件的定义。

运行结果如下：

代码截图如下：

上图中，注意两点：

注意1、红框部分，要保证二者的名字是一致的。如果在注册时，组件的名称是驼峰命名，比如：

1
2
Vue.component('myComponent', myAccount);
//第一个参数是组件的名称（标签名），第二个参数是模板对象

那么，在标签中使用组件时，需要把大写的驼峰改为小写的字母，同时两个单词之间使用-进行连接：

1
<my-component> </my-component>

所以，为了避免名字不一致的问题，我们注册组件时，组件的名称可以直接写成my-component。比如：（避免驼峰不一致的建议写法）

Vue.component(‘my-component’, myAccount);

注意2、绿框部分，一定要用一个大的根元素（例如

）包裹起来。如果我写成下面这样，就没有预期的效果：

template: ‘

登录页面

注册页面

‘

结果如下：（并非预期的效果）

写法二

写法二：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
39
40
41
42
43
44
45
46
47
48
49
<!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> <h3>注册页面</h3></div>' //
template 是 Vue 中的关键字，不能改。

});

new Vue({

el: '#app'

});

</script>

</body>

</html>

代码截图如下：

上图中，同样注意两点：

1、红框部分，要保证二者的名字是一致的。

2、绿框部分，一定要用一个大的根元素（例如

）包裹起来。如果我写成下面这样，就没有预期的效果：

1
template: '<h2>登录页面</h2> <h3>注册页面</h3>'

结果如下：（并非预期的效果）

写法三【荐】

上面的写法一、写法二并不是很智能，因为在定义模板的时候，没有智能提示和高亮，容易出错。我们不妨来看看写法三。

写法三：将组件内容定义到template标签中去。

代码如下：

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!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>

<!-- 定义模板 -->

<template id="myAccount">

<div>

<h2>登录页面</h2>

<h3>注册页面</h3>

</div>

</template>

<div id="app">

<!-- 使用组件 -->

<account> </account>

</div>

<script>

//定义、注册组件

Vue.component('account', {

template: '#myAccount' // template 是 Vue 中的关键字，不能改。

});

new Vue({

el: '#app'

});

</script>

</body>

</html>

代码截图如下：

写法三其实和方法二差不多，无非是把绿框部分的内容，单独放在了