如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
方式一
var tem1 = Vue.extend({
template:'<h3>这是使用 Vue.extend 创建的组件</h3>' //指定组件要展示的HTML结构
}); Vue.component('myTem1',tem1);
/* 使用 Vue.component() 定义全局组件的时候，
组件名称使用 驼峰命名，则在引用组件的时候，需要把大写改为小写，并且用 '-'将单词连接
组件名称不适用驼峰命名，则直接拿名称来使用即可
*/ Vue.component('myTem1',Vue.extend({
template : '<h3>这是使用 Vue.extend 创建的组件</h3>'
})) <div id="app"> <my-tem1> </my-tem1> </div>
-
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
方式二
直接使用Vue.component()
Vue.component('mycom2',{
template : '<h3>这是使用 Vue.component 创建的组件</h3>' })
但是这样写会有一个问题：
<h3>这是使用 Vue.component 创建的组件</h3> <span>123</span>
这个问题是在 组件template属性指向的模板内容，必须有且只能有唯一的一个根元素
所以修改代码如下：
Vue.component('mycom2',{
template :
'<div> <h3>这是使用 Vue.component 创建的组件</h3> <span>123</span> </div>'
})
运行结果如下：
不过这种方式也有一个瑕疵，就是template 属性的值是HTML标签，而在软件中，并没有智能提示，容易出错，若使用这种方式，需要仔细，避免出错
方式三
Vue.component('mycom3',{
template : '#tem1'
}); <div id="app"> <mycom3></mycom3> </div> <template id="tem1"> <div> <h1>这是 template 元素</h1> <span>这种方式好用</span> </div> </template>
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
运行结果如下：
这是Vue创建组件(全局)的3种方式，其实相差不多，希望对大家有所帮助
