Vue.js 元件

元件（Component）是 Vue.js 最強大的功能之一。

元件可以擴充套件 HTML 元素，封裝可重用的程式碼。

元件系統讓我們可以用獨立可複用的小元件來構建大型應用，幾乎任意型別的應用的介面都可以抽象為一個元件樹：

註冊一個全域性元件語法格式如下：

Vue.component(tagName, options)

tagName 為元件名，options 為配置選項。註冊後，我們可以使用以下方式來呼叫元件：

<tagName></tagName>

全域性元件

所有例項都能用全域性元件。

全域性元件例項

註冊一個簡單的全域性元件 itread01，並使用它：

<div id="app"> <itread01></itread01> </div> <script> // 註冊 Vue.component('itread01', { template: '<h1>自定義元件!</h1>' }) // 建立根例項 new Vue({ el: '#app' }) </script>

嘗試一下 ?

區域性元件

我們也可以在例項選項中註冊區域性元件，這樣元件只能在這個例項中使用：

區域性元件例項

註冊一個簡單的區域性元件 itread01，並使用它：

<div id="app"> <itread01></itread01> </div> <script> var Child = { template: '<h1>自定義元件!</h1>' } // 建立根例項 new Vue({ el: '#app', components: { // <itread01> 將只在父模板可用 'itread01': Child } }) </script>

嘗試一下 ?

Prop

prop 是子元件用來接受父元件傳遞過來的資料的一個自定義屬性。

父元件的資料需要通過 props 把資料傳給子元件，子元件需要顯式地用 props 選項宣告 "prop"：

Prop 例項

<div id="app"> <child message="hello!"></child> </div> <script> // 註冊 Vue.component('child', { // 宣告 props props: ['message'], // 同樣也可以在 vm 例項中像 "this.message" 這樣使用 template: '<span>{{ message }}</span>' }) // 建立根例項 new Vue({ el: '#app' }) </script>

嘗試一下 ?

動態 Prop

類似於用 v-bind 繫結 HTML 特性到一個表示式，也可以用 v-bind 動態繫結 props 的值到父元件的資料中。每當父元件的資料變化時，該變化也會傳導給子元件：

Prop 例項

<div id="app"> <div> <input v-model="parentMsg"> <br> <child v-bind:message="parentMsg"></child> </div> </div> <script> // 註冊 Vue.component('child', { // 宣告 props props: ['message'], // 同樣也可以在 vm 例項中像 "this.message" 這樣使用 template: '<span>{{ message }}</span>' }) // 建立根例項 new Vue({ el: '#app', data: { parentMsg: '父元件內容' } }) </script>

嘗試一下 ?

以下例項中使用 v-bind 指令將 todo 傳到每一個重複的元件中：

Prop 例項

<div id="app"> <ol> <todo-item v-for="item in sites" v-bind:todo="item"></todo-item> </ol> </div> <script> Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) new Vue({ el: '#app', data: { sites: [ { text: 'itread01' }, { text: 'Google' }, { text: 'Taobao' } ] } }) </script>

嘗試一下 ?

注意: prop 是單向繫結的：當父元件的屬性變化時，將傳導給子元件，但是不會反過來。

Prop 驗證

元件可以為 props 指定驗證要求。

為了定製 prop 的驗證方式，你可以為 props 中的值提供一個帶有驗證需求的物件，而不是一個字串陣列。例如：

Vue.component('my-component', {
  props: {
    // 基礎的型別檢查 (`null` 和 `undefined` 會通過任何型別驗證)
    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 ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

當 prop 驗證失敗的時候，(開發環境構建版本的) Vue 將會產生一個控制檯的警告。

type 可以是下面原生構造器：

  • String
  • Number
  • Boolean
  • Array
  • Object
  • Date
  • Function
  • Symbol

type 也可以是一個自定義構造器，使用 instanceof 檢測。