Vue.extend()

元件化開發是Vue.js非常重要的一個特性，我們可以將一個頁面視作一個大的根元件，裡面所包含的元素就是不同的子元件，子元件可以在不同的根元件裡被呼叫。我們通常會在一個頁面中宣告一個Vue例項new Vue({})作為跟元件，生成能被反覆使用的子元件就要用到Vue.extend(options)方法，使用方法如下：

var Child=Vue.extend({
    templete:'#child',
    //el和data選項需要通過函式返回值賦值，避免多個元件例項共用一個數據。
    data:function () {
        return{
            ...,
        }

    },
    ...,
})
Vue.component('child',Child)//全域性註冊子元件。
<child ...,></child>//子元件的呼叫方式。
 

元件註冊

1. 全域性註冊
2. 區域性註冊
3. 註冊語法糖

           全域性註冊

全域性註冊要在根例項初始化之前註冊，這樣才能使元件在任意例項中被使用，註冊程式碼如下：

Vue.component('child',Child);

這條語句要寫在var vm=new Vue({...})之前，也就是根例項初始化之前，全域性註冊成功之後，就可以在模組中以定義元素<child>的形式使用元件。

使用方法：

<div id="app">
  <child></child>
</div>

var Child=Vue.extend({
  templete : '<p>這是一個元件</p>'
})

Vue.component('child',Child);

var vm=new Vue({
  el : '#app'
});
 

          輸出的結果：

<div id="app">
  <p>這是一個元件</p>
</div>

          區域性註冊

顧名思義，區域性註冊相對於全域性註冊限定了組建的使用範圍，區域性註冊限定了元件只能在被註冊的元件中使用，註冊和使用方法如下：

var Child=Vue.extend({
    templete : '<p>這是一個子元件</p>'
});

var Parent=Vue.extend({
    templete :'<div>\
      <p>這是一個父元件</p>\
      <my-child></my-child>\
      </div>',
    components : {
      'my-child'=Child
    }
});
 

           輸出的結果：

<div>
   <p>這是一個父元件</p>
   <p>這是一個子元件</p>
<div>

提示：如果在根例項中呼叫<my-child></my-child>就會報異常[Vue warn]:提示<my-child></my-child>為未知自定義元素。

           註冊語法糖

上述兩種註冊方式有一個簡化的方法，可以直接在註冊的時候定義元件構造器選項。

//全域性註冊
Vue.component('child',{
  templete : '<p>這是一個元件</p>'
})
//區域性註冊
var Parent=Vue.extend({
    templete :'<div>\
      <p>這是一個父元件</p>\
      <my-child></my-child>\
      </div>',
    components : {
      'my-child'= {
        templete : '<p>這是一個子元件</p>'
      }
    }
});

輸出的結果和上面常規的註冊方式輸出結果一樣。