一、什么是組件

組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。

?

二、組件用法

組件需要注冊后才可以使用，注冊有全局注冊和局部注冊兩種方式。

2.1 全局注冊后，任何V ue 實例都可以使用。如：

<div id="app1"><my-component></my-component></div> Vue.component('my-component',{template: '<div>這里是組件的內容</div>' });var app1 = new Vue({el: '#app1' });

?要在父實例中使用這個組件，必須要在實例創建前注冊，之后就可以用＜my-component></my- component> 的形式來使用組件了

template的DOM結構必須被一個元素包含， 如果直接寫成“這里是組件的內容”， 不帶“<div></ div ＞”是無法渲染的。（而且最外層只能有一個根的<div>標簽）

?

2.2?在Vue 實例中，使用component選項可以局部注冊組件，注冊后的組件只有在該實例作用域下有效。如：

<div id="app2"><my-component1></my-component1></div> var app2 = new Vue({el: '#app2',components:{'my-component1': {template: '<div>這里是局部注冊組件的內容</div>'}} });

?

2.3 data必須是函數

除了template選項外，組件中還可以像Vue實例那樣使用其他的選項，比如data 、computed 、methods等。但是在使用data時，和實例稍有區別， data 必須是函數，然后將數據return 出去。

<div id="app3"><my-component3></my-component3></div> Vue.component('my-component3',{template: '<div>{{message}}</div>',data: function(){return {message: '組件內容'}} }); var app3 = new Vue({el: '#app3' });

?一般return的對象不要引用外部的對象，因為如果return 出的對象引用了外部的一個對象， 那這個對象就是共享的， 任何一方修改都會同步。

所以一般給組件返回一個新的獨立的data對象。

?

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的vue组件详解（一）——组件与复用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。