Vuejs第八篇之Vuejs組件的定義實(shí)例解析
本文參考官方文檔整理的一篇更加細(xì)致代碼更加安全的一篇適合新手閱讀學(xué)習(xí)吧教程。
本篇資料來于官方文檔：
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元素，具體來說，比如上面的<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】將定義的組件注冊到Vue實(shí)例上，這會(huì)讓指定標(biāo)簽，被組件的內(nèi)容所替代。
如代碼：
//注冊他到Vue實(shí)例上
Vue.component("add-button", btn);
具體而言，每一個(gè)以下這樣的標(biāo)簽（在Vue的根實(shí)例范圍內(nèi)的）
<add-button></add-button>
會(huì)被
<button>這是一個(gè)按鈕</button>
所替代。
【4】以上方法是全局注冊（每個(gè)Vue實(shí)例的add-button標(biāo)簽都會(huì)被我們定義的所替代）；
解決辦法是局部注冊。
如代碼：（這是是設(shè)置了template屬性，也可以在沒有這個(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í)例，也就是說讓Vue對這個(gè)根生效
var vm = new Vue({
el: '#app',
template: "<add-button></add-button>"
});
</script>
③局部注冊組件：
簡單來說，只對這一個(gè)Vue實(shí)例生效，具體做法是，在注冊那一步，跳過；
然后在聲明Vue實(shí)例的時(shí)候，將添加到components這個(gè)屬性中（他是一個(gè)對象，以KV形式放置）（注意，這個(gè)單詞多一個(gè)s）
如代碼：
<div id="app">
</div>
<script>
//定義一個(gè)組件
var btn = Vue.extend({
template: "<button>這是一個(gè)按鈕</button>"
})
//創(chuàng)建根實(shí)例，也就是說讓Vue對這個(gè)根生效
var vm = new Vue({
el: '#app',
template: "<add-button></add-button>",
components: {
"add-button": btn
}
});
</script>
注：
根據(jù)官方教程，這種方法（指局部注冊），也適用于其他資源，比如指令、過濾器和過渡。
④步驟簡化：
【1】定義組件和注冊組件結(jié)合起來一步完成：
//定義一個(gè)組件
Vue.component("add-button", {
template: "<button>這是一個(gè)按鈕</button>"
});
【2】局部注冊時(shí)，定義和注冊一步完成：
//創(chuàng)建根實(shí)例，也就是說讓Vue對這個(gè)根生效
var vm = new Vue({
el: '#app',
template: "<add-button></add-button>",
components: {
"add-button": {
template: "<button>這是一個(gè)按鈕</button>"
}
}
});
⑤data屬性
直接給組件添加data屬性是不可以的（無效）；
原因在于，假如這么干，那么組件的data屬性有可能是一個(gè)對象，而這個(gè)對象也有可能是外部傳入的（例如先聲明一個(gè)對象，然后這個(gè)對象作為data的值），可能導(dǎo)致這個(gè)組件的所有副本，都共享一個(gè)對象（那個(gè)外部傳入的），這顯然是不對的。
因此，data屬性應(yīng)該是一個(gè)函數(shù)，然后有一個(gè)返回值，這個(gè)返回值作為data屬性的值。
且這個(gè)返回值應(yīng)該是一個(gè)全新的對象（即深度復(fù)制的，避免多個(gè)組件共享一個(gè)對象）；
如代碼：
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è)對象）
<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元素對什么元素可以放在它之中是有限制的；
但實(shí)際我自己測試沒發(fā)現(xiàn)問題，所以不明白。
【2】給個(gè)URL吧，如果真出問題了我再回頭研究。
http://cn.vuejs.org/guide/components.html#u6A21_u677F_u89E3_u6790
以上所述是小編給大家介紹的Vuejs第八篇之Vuejs組件的定義實(shí)例解析，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
vue+element實(shí)現(xiàn)圖片上傳及裁剪功能
這篇文章主要為大家詳細(xì)介紹了vue+element實(shí)現(xiàn)圖片上傳及裁剪功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了vue路由跳轉(zhuǎn)傳參數(shù)的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
如何用VUE和Canvas實(shí)現(xiàn)雷霆戰(zhàn)機(jī)打字類小游戲
