vue組件詳解（一）——組件與復用

一、什么是組件

組件 (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對象。