本文參考官方文檔整理的一篇更加細致代碼更加安全的一篇適合新手閱讀學習吧教程。
本篇資料來于官方文檔：
http://cn.vuejs.org/guide/components.html
什么是組件？
組件（Component）是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生 HTML 元素的形式，以 is 特性擴展。
組件的定義
①組件的作用：
【1】擴展HTML元素，封裝可重用的代碼；
【2】組件是自定義元素，Vuejs的編譯器可以為其添加特殊的功能；
【3】某些情況下，組件可以是原生HTML元素的形式，以is的方式擴展。
②寫一個標準的組件：
分為以下幾步：
【1】掛載組件的地方，需要是Vue實例所渲染的html元素，具體來說，比如上面的<div id=”app”></div>這樣的html元素及他的子節點；
【2】定義一個組件，用
var 變量名 = Vue.extend({template:”這里是html的模板內容”})這樣的形式創建，例如：//定義一個組件 var btn = Vue.extend({ template: "<button>這是一個按鈕</button>" })【3】將定義的組件注冊到Vue實例上，這會讓指定標簽，被組件的內容所替代。
如代碼：
//注冊他到Vue實例上 Vue.component("add-button", btn); 具體而言，每一個以下這樣的標簽（在Vue的根實例范圍內的）
<add-button></add-button>
會被
<button>這是一個按鈕</button>
所替代。
【4】以上方法是全局注冊（每個Vue實例的add-button標簽都會被我們定義的所替代）；
解決辦法是局部注冊。
如代碼：（這是是設置了template屬性，也可以在沒有這個屬性的時候，在<div id=”app”></div>標簽內放置<add-button></add-button>標簽
<div id="app"> </div> <script> //定義一個組件 var btn = Vue.extend({ template: "<button>這是一個按鈕</button>" }) Vue.component("add-button", btn); //創建根實例，也就是說讓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>" }) //創建根實例，也就是說讓Vue對這個根生效 var vm = new Vue({ el: '#app', template: "<add-button></add-button>", components: { "add-button": btn } }); </script> 注：
根據官方教程，這種方法（指局部注冊），也適用于其他資源，比如指令、過濾器和過渡。
④步驟簡化：
【1】定義組件和注冊組件結合起來一步完成：
//定義一個組件 Vue.component("add-button", { template: "<button>這是一個按鈕</button>" }); 【2】局部注冊時，定義和注冊一步完成：
//創建根實例，也就是說讓Vue對這個根生效 var vm = new Vue({ el: '#app', template: "<add-button></add-button>", components: { "add-button": { template: "<button>這是一個按鈕</button>" } } }); ⑤data屬性
直接給組件添加data屬性是不可以的（無效）；
原因在于，假如這么干，那么組件的data屬性有可能是一個對象，而這個對象也有可能是外部傳入的（例如先聲明一個對象，然后這個對象作為data的值），可能導致這個組件的所有副本，都共享一個對象（那個外部傳入的），這顯然是不對的。
因此，data屬性應該是一個函數，然后有一個返回值，這個返回值作為data屬性的值。
且這個返回值應該是一個全新的對象（即深度復制的，避免多個組件共享一個對象）；
如代碼：
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()中時，也須是一個函數。
⑥is特性：
【1】按照官方教程，一些HTML元素對什么元素可以放在它之中是有限制的；
但實際我自己測試沒發現問題，所以不明白。
【2】給個URL吧，如果真出問題了我再回頭研究。
http://cn.vuejs.org/guide/components.html#u6A21_u677F_u89E3_u6790
以上所述是小編給大家介紹的Vuejs第八篇之Vuejs組件的定義實例解析，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
