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

柴小智發表於2018-04-08
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物件。

 

相關文章