Vuejs第八篇之Vuejs組件的定義實例解析
本文參考官方文檔整理的一篇更加細(xì)致代碼更加安全的一篇適合新手閱讀學(xué)習(xí)吧教程。
本篇資料來于官方文檔：
http://cn.vuejs.org/guide/components.html
什么是組件？
組件（Component）是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生 HTML 元素的形式，以 is 特性擴展。
組件的定義
①組件的作用：
【1】擴展HTML元素，封裝可重用的代碼；
【2】組件是自定義元素，Vuejs的編譯器可以為其添加特殊的功能；
【3】某些情況下，組件可以是原生HTML元素的形式，以is的方式擴展。
②寫一個標(biāo)準(zhǔn)的組件：
分為以下幾步：
【1】掛載組件的地方，需要是Vue實例所渲染的html元素，具體來說，比如上面的<div id=”app”></div>這樣的html元素及他的子節(jié)點；
【2】定義一個組件，用
var 變量名 = Vue.extend({template:”這里是html的模板內(nèi)容”})
這樣的形式創(chuàng)建，例如：
//定義一個組件
var btn = Vue.extend({
template: "<button>這是一個按鈕</button>"
})
【3】將定義的組件注冊到Vue實例上，這會讓指定標(biāo)簽，被組件的內(nèi)容所替代。
如代碼：
//注冊他到Vue實例上
Vue.component("add-button", btn);
具體而言，每一個以下這樣的標(biāo)簽（在Vue的根實例范圍內(nèi)的）
<add-button></add-button>
會被
<button>這是一個按鈕</button>
所替代。
【4】以上方法是全局注冊（每個Vue實例的add-button標(biāo)簽都會被我們定義的所替代）；
解決辦法是局部注冊。
如代碼：（這是是設(shè)置了template屬性，也可以在沒有這個屬性的時候，在<div id=”app”></div>標(biāo)簽內(nèi)放置<add-button></add-button>標(biāo)簽
<div id="app">
</div>
<script>
//定義一個組件
var btn = Vue.extend({
template: "<button>這是一個按鈕</button>"
})
Vue.component("add-button", btn);
//創(chuàng)建根實例，也就是說讓Vue對這個根生效
var vm = new Vue({
el: '#app',
template: "<add-button></add-button>"
});
</script>
③局部注冊組件：
簡單來說，只對這一個Vue實例生效，具體做法是，在注冊那一步，跳過；
然后在聲明Vue實例的時候，將添加到components這個屬性中（他是一個對象，以KV形式放置）（注意，這個單詞多一個s）
如代碼：
<div id="app">
</div>
<script>
//定義一個組件
var btn = Vue.extend({
template: "<button>這是一個按鈕</button>"
})
//創(chuàng)建根實例，也就是說讓Vue對這個根生效
var vm = new Vue({
el: '#app',
template: "<add-button></add-button>",
components: {
"add-button": btn
}
});
</script>
注：
根據(jù)官方教程，這種方法（指局部注冊），也適用于其他資源，比如指令、過濾器和過渡。
④步驟簡化：
【1】定義組件和注冊組件結(jié)合起來一步完成：
//定義一個組件
Vue.component("add-button", {
template: "<button>這是一個按鈕</button>"
});
【2】局部注冊時，定義和注冊一步完成：
//創(chuàng)建根實例，也就是說讓Vue對這個根生效
var vm = new Vue({
el: '#app',
template: "<add-button></add-button>",
components: {
"add-button": {
template: "<button>這是一個按鈕</button>"
}
}
});
⑤data屬性
直接給組件添加data屬性是不可以的（無效）；
原因在于，假如這么干，那么組件的data屬性有可能是一個對象，而這個對象也有可能是外部傳入的（例如先聲明一個對象，然后這個對象作為data的值），可能導(dǎo)致這個組件的所有副本，都共享一個對象（那個外部傳入的），這顯然是不對的。
因此，data屬性應(yīng)該是一個函數(shù)，然后有一個返回值，這個返回值作為data屬性的值。
且這個返回值應(yīng)該是一個全新的對象（即深度復(fù)制的，避免多個組件共享一個對象）；
如代碼：
var vm = new Vue({
el: '#app',
template: "<add-button></add-button>",
components: {
"add-button": {
template: "<button>這是一個按鈕{{btn}}</button>",
data: function () {
return {btn: "123"};
}
}
}
});
另外，假如這樣的話，btn的值是一樣的（因為他們實際上還是共享了一個對象）
<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>這是一個按鈕{{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>這是一個按鈕{{btn}}</button>",
data: function () {
return obj;
}
}
}
});
</script>
注：
el屬性用在Vue.extend()中時，也須是一個函數(shù)。
⑥is特性：
【1】按照官方教程，一些HTML元素對什么元素可以放在它之中是有限制的；
但實際我自己測試沒發(fā)現(xiàn)問題，所以不明白。
【2】給個URL吧，如果真出問題了我再回頭研究。
http://cn.vuejs.org/guide/components.html#u6A21_u677F_u89E3_u6790
以上所述是小編給大家介紹的Vuejs第八篇之Vuejs組件的定義實例解析，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue+axios使用FormData方式向后端發(fā)送數(shù)據(jù)
在前后端分離的項目中經(jīng)常使用到Vue+axios通過FormData的方式向后端發(fā)送表單數(shù)據(jù),下面就來介紹一下如何實現(xiàn),感興趣的可以了解一下2023-09-09
今天小編就為大家分享一篇解決vue A對象賦值給B對象,修改B屬性會影響到A的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
本篇文章主要介紹了vue+iview寫個彈框的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了vue使用refs獲取嵌套組件中的值過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要為大家詳細(xì)介紹了如何利用Vue實現(xiàn)多點涂鴉效果，文中的示例代碼講解詳細(xì)，具有一定的學(xué)習(xí)價值，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-03-03
有關(guān)vue 組件切換,動態(tài)組件,組件緩存
這篇文章主要介紹了有關(guān)vue 組件切換,動態(tài)組件,組件緩存，在組件化開發(fā)模式下，我們會把整個項目拆分成很多組件，然后按照合理的方式組織起來,達到預(yù)期效果，下面來看看文章的詳細(xì)內(nèi)容2021-11-11
最近寫代碼遇到一問題祖先級別的組件怎么操作孫子的兒子的組件方法，在網(wǎng)上搜了半天都是父子傳參，父子操作，暈暈乎乎的想起了bus，接下來通過本文給大家介紹vue?祖先組件操作后代組件方法,需要的朋友可以參考下2022-11-11
部署vue+Springboot前后端分離項目的步驟實現(xiàn)
這篇文章主要介紹了部署vue+Springboot前后端分離項目的步驟實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要介紹了Vue檢測屏幕變化來改變不同的charts樣式實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了vue中el-upload上傳圖片到七牛的示例代碼,實現(xiàn)思路其實也很簡單，需要從后臺獲取七牛token上傳圖片到七牛，具體示例代碼大家跟隨小編一起學(xué)習(xí)吧2018-10-10