vue.js2.0 自定義組件初體驗

VUE.JS 2.0 自定義組件初體驗

理解

組件（Component）是 Vue.js 最強大的功能之一。組件能夠擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素， Vue.js 的編譯器爲它添加特殊功能。在有些狀況下，組件也能夠是原生 HTML 元素的形式，以 is 特性擴展。

使用組件

建立單文件組件

<template>
</template>

<script>
  export default {
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
</style>

組件註冊

註冊分爲兩種：局部註冊和全局註冊。註冊一個全局組件，可使用 Vue.component(tagName, options)。 把構造函數註冊到my-component這個 id Vue.component('my-component', MyComponent)，爲了寫法更簡單，也能夠直接傳入 option 對象來代替構造函數，Vue.component() 會爲你隱式調用 Vue.extend() 。

// 註冊全局組件,指定以前設定的元素名,而後傳入對象
Vue.component('my-component', {
  template: '<div>hello world!</div>'
})

以後就能在父級實例的模板中使用註冊過的組件了 (務必在初始化根實例以前註冊組件) ：

<my-component></my-component>

咱們沒有必要，也不該該全局註冊全部組件。你能夠限制一個組件僅對另外一個組件及其後代可用，只要在另外一個組件的 components 選項中傳入這個組件便可。

 import header from './components/header/header.vue';

  export default {
    data () {
    },
    components: {
      'v-header': header
    }
  };

構成組件

data對象

data 必須是函數。由於若是不是函數的，聲明多個組件的時候，他們共享的就是同一個data，這樣就會亂掉。若是經過函數返回，那麼每一個組件維持本身的data做用域。該data屬性只在其component中可見。

經過 prop 傳遞數據

組件實例的做用域是孤立的,組件和組件之間，即便有同名屬性，值也不共享。這意味着不能而且不該該在子組件的模板內直接引用父組件的數據。可使用 props 把數據傳給子組件。

Vue.component('child', {
  // 聲明 props
  props: ['message'],
  // 就像 data 同樣，prop 能夠用在模板內
  // 一樣也能夠在 vm 實例中像 「this.message」 這樣使用
  template: '<span>{{ message }}</span>'
})

須要注意的是HTML 特性是不區分大小寫的。因此，當使用的不是字符串模版，camelCased (駝峯式) 命名的 prop 須要轉換爲相對應的 kebab-case (短橫線隔開式) 命名，這點在angularjs的指令中也同樣。

Vue.component('child', {
  // camelCase in JavaScript
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>'
})

<!-- kebab-case in HTML -->
<child my-message="hello!"></child>

在vue2.0中prop 是單向綁定的：當父組件的屬性變化時，將傳導給子組件，可是不會反過來。這是爲了防止子組件無心修改了父組件的狀態——這會讓應用的數據流難以理解。每次父組件更新時，子組件的全部 prop 都會更新爲最新值。這意味着你不該該在子組件內部改變 prop 。若是你這麼作了，Vue 會在控制檯給出警告。這點官方文檔給出了明確的說明和解決辦法。

 當我開發一個通用組件時，須要對傳入的數據進行嚴格的驗證，咱們能夠定義傳入數據的類型，同時也能夠設置其默認值。若是傳入的數據不符合規格，Vue 會發出警告。

Vue.component('example', {
  props: {
    // 基礎類型檢測 （`null` 意思是任何類型均可以）
    propA: Number,
    // 多種類型
    propB: [String, Number],
    // 必傳且是字符串
    propC: {
      type: String,
      required: true
    },
    // 數字，有默認值
    propD: {
      type: Number,
      default: 100
    },
    // 數組／對象的默認值應當由一個工廠函數返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定義驗證函數
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

type 能夠是下面原生構造器：

• String
• Number
• Boolean
• Function
• Object
• Array

type 也能夠是一個自定義構造器函數，使用 instanceof 檢測。

生命週期

Vue實例有一個完整的生命週期，也就是從開始建立、初始化數據、編譯模板、掛載Dom、渲染→更新→渲染、卸載等一系列過程，咱們稱這是Vue的生命週期。通俗說就是Vue實例從建立到銷燬的過程，就是生命週期。首先看看下面官網的一張生命週期的圖：

Vue提供的能夠註冊的鉤子都在上圖片的紅色框標註。 他們分別是：

1. beforeCreate：在實例初始化以後，數據觀測(data observer) 和 event/watcher 事件配置以前被調用。
2. created：實例已經建立完成以後被調用。在這一步，實例已完成如下的配置：數據觀測(data observer)，屬性和方法的運算， watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。
3. beforeMount：在掛載開始以前被調用：相關的 render 函數首次被調用。
4. mounted：el 被新建立的 vm.$el 替換，並掛載到實例上去以後調用該鉤子。若是 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。
5. beforeUpdate：數據更新時調用，發生在虛擬 DOM 從新渲染和打補丁以前。 你能夠在這個鉤子中進一步地更改狀態，這不會觸發附加的重渲染過程。
6. updated：因爲數據更改致使的虛擬 DOM 從新渲染和打補丁，在這以後會調用該鉤子。當這個鉤子被調用時，組件 DOM 已經更新，因此你如今能夠執行依賴於 DOM 的操做。然而在大多數狀況下，你應該避免在此期間更改狀態，由於這可能會致使更新無限循環。該鉤子在服務器端渲染期間不被調用。
7. beforeDestroy：實例銷燬以前調用。在這一步，實例仍然徹底可用。
8. destroyed：Vue 實例銷燬後調用。調用後，Vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。 該鉤子在服務器端渲染期間不被調用。