vue.js2.0 自訂群組件初體驗

標籤：作用   tor   case   required   構造   created   bsp   過程   事件   

理解

組件（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 執行個體指示的所有東西都會解除綁定定，所有的事件監聽器會被移除，所有的子執行個體也會被銷毀。 該鉤子在伺服器端渲染期間不被調用。

 

vue.js2.0 自訂群組件初體驗