概述

Vue.js组件有全局组件和局部组件

全局组件

所有实例都能用，注册方法如下

1
2
3
4
//全局组件
Vue.component('myh1', {
    template: '<h1 style="color: red">我的全局组件:myh1</h1>'
})

局部组件

在实例选项中注册，组件只能在这个实例中使用，注册方法如下

1
2
3
4
5
6
7
//局部组件
let Child = {
    template: '<h1>我的局部组件:Child</h1>'
}
let Child2 = {
    template: '<h1>我的局部组件:Child2</h1>'
}

组件使用

创建一个js文件专门用于定义组件

1
2
3
4
5
6
7
8
9
10
11
//全局组件
Vue.component('myh1', {
    template: '<h1 style="color: red">我的全局组件:myh1</h1>'
})
//局部组件
let Child = {
    template: '<h1>我的局部组件:Child</h1>'
}
let Child2 = {
    template: '<h1>我的局部组件:Child2</h1>'
}

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
34
35
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/component.js"></script>
</head>
<body>
测试app1（只有全局组件myh1生效，因为Vue实例中没有使用任何局部组件）
<div id="app1">
    <myh1></myh1>
    <myh2></myh2>
    <myh3></myh3>
</div>
测试app2（全局组件myh1和局部组件（Child，Child2）都生效）
<div id="app2">
    <myh1></myh1>
    <myh2></myh2>
    <myh3></myh3>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app1'
    })
    new Vue({
        el: '#app2',
        components: {
            'myh2': Child,
            'myh3': Child2
        }
    })
</script>
</body>
</html>

img