如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
方式一
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種方式，其實相差不多，希望對大家有所幫助
