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

1、什麼是組件

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

 

2、組件用法

組件須要註冊後纔可使用，註冊有全局註冊和局部註冊兩種方式。

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對象。