本文參考官方文檔整理的一篇更加細(xì)致代碼更加安全的一篇適合新手閱讀學(xué)習(xí)吧教程。

本篇資料來(lái)于官方文檔：

http://cn.vuejs.org/guide/components.html

什么是組件？

組件（Component）是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生 HTML 元素的形式，以 is 特性擴(kuò)展。

組件的定義

①組件的作用：

【1】擴(kuò)展HTML元素，封裝可重用的代碼；

【2】組件是自定義元素，Vuejs的編譯器可以為其添加特殊的功能；

【3】某些情況下，組件可以是原生HTML元素的形式，以is的方式擴(kuò)展。

②寫一個(gè)標(biāo)準(zhǔn)的組件：

分為以下幾步：

【1】掛載組件的地方，需要是Vue實(shí)例所渲染的html元素，具體來(lái)說(shuō)，比如上面的<div id=”app”></div>這樣的html元素及他的子節(jié)點(diǎn)；

【2】定義一個(gè)組件，用

var 變量名 = Vue.extend({template:”這里是html的模板內(nèi)容”})
這樣的形式創(chuàng)建，例如：

//定義一個(gè)組件 
var btn = Vue.extend({ 
template: "<button>這是一個(gè)按鈕</button>" 
})

【3】將定義的組件注冊(cè)到Vue實(shí)例上，這會(huì)讓指定標(biāo)簽，被組件的內(nèi)容所替代。

如代碼：

//注冊(cè)他到Vue實(shí)例上 
Vue.component("add-button", btn); 

具體而言，每一個(gè)以下這樣的標(biāo)簽（在Vue的根實(shí)例范圍內(nèi)的）

<add-button></add-button> 

會(huì)被

<button>這是一個(gè)按鈕</button> 

所替代。

【4】以上方法是全局注冊(cè)（每個(gè)Vue實(shí)例的add-button標(biāo)簽都會(huì)被我們定義的所替代）；
解決辦法是局部注冊(cè)。

如代碼：（這是是設(shè)置了template屬性，也可以在沒(méi)有這個(gè)屬性的時(shí)候，在<div id=”app”></div>標(biāo)簽內(nèi)放置<add-button></add-button>標(biāo)簽

<div id="app"> 
</div> 
<script> 
//定義一個(gè)組件 
var btn = Vue.extend({ 
template: "<button>這是一個(gè)按鈕</button>" 
}) 

Vue.component("add-button", btn); 

//創(chuàng)建根實(shí)例，也就是說(shuō)讓Vue對(duì)這個(gè)根生效 
var vm = new Vue({ 
el: '#app', 
template: "<add-button></add-button>" 
}); 
</script> 

③局部注冊(cè)組件：

簡(jiǎn)單來(lái)說(shuō)，只對(duì)這一個(gè)Vue實(shí)例生效，具體做法是，在注冊(cè)那一步，跳過(guò)；

然后在聲明Vue實(shí)例的時(shí)候，將添加到components這個(gè)屬性中（他是一個(gè)對(duì)象，以KV形式放置）（注意，這個(gè)單詞多一個(gè)s）

如代碼：

<div id="app"> 
</div> 
<script> 
//定義一個(gè)組件 
var btn = Vue.extend({ 
template: "<button>這是一個(gè)按鈕</button>" 
}) 
//創(chuàng)建根實(shí)例，也就是說(shuō)讓Vue對(duì)這個(gè)根生效 
var vm = new Vue({ 
el: '#app', 
template: "<add-button></add-button>", 
components: { 
"add-button": btn 
} 
}); 
</script> 

注：

根據(jù)官方教程，這種方法（指局部注冊(cè)），也適用于其他資源，比如指令、過(guò)濾器和過(guò)渡。

④步驟簡(jiǎn)化：

【1】定義組件和注冊(cè)組件結(jié)合起來(lái)一步完成：

//定義一個(gè)組件 
Vue.component("add-button", { 
template: "<button>這是一個(gè)按鈕</button>" 
}); 

【2】局部注冊(cè)時(shí)，定義和注冊(cè)一步完成：

//創(chuàng)建根實(shí)例，也就是說(shuō)讓Vue對(duì)這個(gè)根生效 
var vm = new Vue({ 
el: '#app', 
template: "<add-button></add-button>", 
components: { 
"add-button": { 
template: "<button>這是一個(gè)按鈕</button>" 
} 
} 
}); 

⑤data屬性

直接給組件添加data屬性是不可以的（無(wú)效）；

原因在于，假如這么干，那么組件的data屬性有可能是一個(gè)對(duì)象，而這個(gè)對(duì)象也有可能是外部傳入的（例如先聲明一個(gè)對(duì)象，然后這個(gè)對(duì)象作為data的值），可能導(dǎo)致這個(gè)組件的所有副本，都共享一個(gè)對(duì)象（那個(gè)外部傳入的），這顯然是不對(duì)的。

因此，data屬性應(yīng)該是一個(gè)函數(shù)，然后有一個(gè)返回值，這個(gè)返回值作為data屬性的值。

且這個(gè)返回值應(yīng)該是一個(gè)全新的對(duì)象（即深度復(fù)制的，避免多個(gè)組件共享一個(gè)對(duì)象）；

如代碼：

var vm = new Vue({ 
el: '#app', 
template: "<add-button></add-button>", 
components: { 
"add-button": { 
template: "<button>這是一個(gè)按鈕{{btn}}</button>", 
data: function () { 
return {btn: "123"}; 
} 
} 
} 
}); 

另外，假如這樣的話，btn的值是一樣的（因?yàn)樗麄儗?shí)際上還是共享了一個(gè)對(duì)象）

<div id="app"> 
</div> 
<div id="app2"> 
</div> 
<script> 
var obj = {btn: "123"}; 
var vm = new Vue({ 
el: '#app', 
template: "<add-button></add-button>", 
components: { 
"add-button": { 
template: "<button>這是一個(gè)按鈕{{btn}}</button>", 
data: function () { 
return obj; 
} 
} 
} 
}); 
obj.btn = "456"; 
var vm2 = new Vue({ 
el: '#app2', 
template: "<add-button></add-button>", 
components: { 
"add-button": { 
template: "<button>這是一個(gè)按鈕{{btn}}</button>", 
data: function () { 
return obj; 
} 
} 
} 
}); 
</script> 

注：

el屬性用在Vue.extend()中時(shí)，也須是一個(gè)函數(shù)。

⑥is特性：

【1】按照官方教程，一些HTML元素對(duì)什么元素可以放在它之中是有限制的；

但實(shí)際我自己測(cè)試沒(méi)發(fā)現(xiàn)問(wèn)題，所以不明白。

【2】給個(gè)URL吧，如果真出問(wèn)題了我再回頭研究。

http://cn.vuejs.org/guide/components.html#u6A21_u677F_u89E3_u6790

以上所述是小編給大家介紹的Vuejs第八篇之Vuejs組件的定義實(shí)例解析，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！