如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
方式一
var tem1 = Vue.extend({
template:'<h3>這是使用 Vue.extend 創(chuàng)建的組件</h3>' //指定組件要展示的HTML結(jié)構(gòu)
}); Vue.component('myTem1',tem1);
/* 使用 Vue.component() 定義全局組件的時(shí)候，
組件名稱使用 駝峰命名，則在引用組件的時(shí)候，需要把大寫改為小寫，并且用 '-'將單詞連接
組件名稱不適用駝峰命名，則直接拿名稱來使用即可
*/ Vue.component('myTem1',Vue.extend({
template : '<h3>這是使用 Vue.extend 創(chuàng)建的組件</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 創(chuàng)建的組件</h3>' })
但是這樣寫會(huì)有一個(gè)問題：
<h3>這是使用 Vue.component 創(chuàng)建的組件</h3> <span>123</span>
這個(gè)問題是在 組件template屬性指向的模板內(nèi)容，必須有且只能有唯一的一個(gè)根元素
所以修改代碼如下：
Vue.component('mycom2',{
template :
'<div> <h3>這是使用 Vue.component 創(chuàng)建的組件</h3> <span>123</span> </div>'
})
運(yùn)行結(jié)果如下：
不過這種方式也有一個(gè)瑕疵，就是template 屬性的值是HTML標(biāo)簽，而在軟件中，并沒有智能提示，容易出錯(cuò)，若使用這種方式，需要仔細(xì)，避免出錯(cuò)
方式三
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
運(yùn)行結(jié)果如下：
這是Vue創(chuàng)建組件(全局)的3種方式，其實(shí)相差不多，希望對大家有所幫助
