組件注冊

在注冊一個組件的時候，我們始終需要給它一個名字。比如：

Vue.component('my-component-name', { /* ... */ })

該組件名就是 Vue.component 的第一個參數(shù).
當(dāng)直接在DOM中使用一個組件（而不是在字符串模板或單文件組件）的時候，我們強烈推薦遵循w3c規(guī)范中的自定義組件名（字母全小寫且必須包含一個連字符）。

組件名大小寫

定義組件名的方式有兩種：

使用kebab-case

當(dāng)使用 kebab-case (短橫線分隔命名) 定義一個組件時，你也必須在引用這個自定義元素時使用 kebab-case，例如 <my-component-name>。

使用pascalCase

當(dāng)使用 PascalCase (首字母大寫命名) 定義一個組件時，你在引用這個自定義元素時兩種命名法都可以使用。也就是說<my-component-name> 和 <MyComponentName>都是可接受的。注意，盡管如此，直接在 DOM (即非字符串的模板) 中使用時只有 kebab-case 是有效的。

Vue.component('my-component-name', {
  // ... 選項 ...
})

這些組件是全局注冊的。也就是說它們在注冊之后可以用在任何新創(chuàng)建的 Vue 根實例 (new Vue) 的模板中.

<div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>
<script>
Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })
new Vue({ el: '#app' })
</script>

在所有子組件中也是如此，也就是說這三個組件在各自內(nèi)部也都可以相互使用。

全局注冊往往是不夠理想的。比如，如果你使用一個像 webpack 這樣的構(gòu)建系統(tǒng)，全局注冊所有的組件意味著即便你已經(jīng)不再使用一個組件了，它仍然會被包含在你最終的構(gòu)建結(jié)果中。這造成了用戶下載的 JavaScript 的無謂的增加。
在這些情況下，你可以通過一個普通的 JavaScript 對象來定義組件：var ComponentA = { /* ... */ }
然后在 components 選項中定義你想要使用的組件：

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

注意局部注冊的組件在其子組件中不可用。例如，如果你希望 ComponentA 在 ComponentB 中可用，則你需要這樣寫：

var ComponentA = { /* ... */ }

var ComponentB = {
  components: {
    'component-a': ComponentA
  },
  // ...
}

如果你通過 Babel 和 webpack 使用 ES2015 模塊，那么代碼看起來更像：

import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  },
  // ...
}

基礎(chǔ)組件的自動化全局注冊

可能你的許多組件只是包裹了一個輸入框或按鈕之類的元素，是相對通用的。我們有時候會把他們稱為基礎(chǔ)組件，它們會在各個組件中被頻繁的用到。
如果你使用了 webpack (或在內(nèi)部使用了 webpack 的 Vue CLI 3+)，那么就可以使用 require.context 只全局注冊這些非常通用的基礎(chǔ)組件。這里有一份可以讓你在應(yīng)用入口文件 (比如 src/main.js) 中全局導(dǎo)入基礎(chǔ)組件的示例代碼：

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
  // 其組件目錄的相對路徑
  './components',
  // 是否查詢其子目錄
  false,
  // 匹配基礎(chǔ)組件文件名的正則表達式
  /Base[A-Z]\w+\.(vue|js)$/
)

requireComponent.keys().forEach(fileName => {
  // 獲取組件配置
  const componentConfig = requireComponent(fileName)

  // 獲取組件的 PascalCase 命名
  const componentName = upperFirst(
    camelCase(
      // 剝?nèi)ノ募_頭的 `./` 和結(jié)尾的擴展名
      fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
    )
  )

  // 全局注冊組件
  Vue.component(
    componentName,
    // 如果這個組件選項是通過 `export default` 導(dǎo)出的，
    // 那么就會優(yōu)先使用 `.default`，
    // 否則回退到使用模塊的根。
    componentConfig.default || componentConfig
  )
})

prop

prop的大小寫

HTML 中的特性名是大小寫不敏感的，當(dāng)你使用 DOM 中的模板時，camelCase (駝峰命名法) 的 prop 名需要使用其等價的 kebab-case (短橫線分隔命名) 命名。如果你使用字符串模板，那么這個限制就不存在了。

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})
<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>

prop類型

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object
}

這不僅為你的組件提供了文檔，還會在它們遇到錯誤的類型時從瀏覽器的 JavaScript 控制臺提示用戶。

單向數(shù)據(jù)流

所有的 prop 都使得其父子prop之間形成了一個單向下行綁定：父級prop 的更新會向下流動到子組件中，但是反過來則不行。這樣會防止從子組件意外改變父級組件的狀態(tài)，從而導(dǎo)致你的應(yīng)用的數(shù)據(jù)流向難以理解。

額外的，每次父級組件發(fā)生更新時，子組件中所有的 prop 都將會刷新為最新的值。這意味著你不應(yīng)該在一個子組件內(nèi)部改變 prop。如果你這樣做了，Vue 會在瀏覽器的控制臺中發(fā)出警告。

這里有兩種常見的試圖改變一個 prop 的情形：
1、這個 prop 用來傳遞一個初始值；這個子組件接下來希望將其作為一個本地的 prop 數(shù)據(jù)來使用。在這種情況下，最好定義一個本地的 data 屬性并將這個 prop 用作其初始值：

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

2、這個 prop 以一種原始的值傳入且需要進行轉(zhuǎn)換。在這種情況下，最好使用這個 prop 的值來定義一個計算屬性：

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

• 注意在 JavaScript 中對象和數(shù)組是通過引用傳入的，所以對于一個數(shù)組或?qū)ο箢愋偷?prop 來說，在子組件中改變這個對象或數(shù)組本身將會影響到父組件的狀態(tài)。

Prop驗證

我們可以為組件的 prop 指定驗證要求，例如你知道的這些類型。如果有一個需求沒有被滿足，則 Vue 會在瀏覽器控制臺中警告你。
為了定制 prop 的驗證方式，你可以為 props 中的值提供一個帶有驗證需求的對象，而不是一個字符串?dāng)?shù)組。例如：

Vue.component('my-component', {
  props: {
    // 基礎(chǔ)的類型檢查 (`null` 和 `undefined` 會通過任何類型驗證)
    propA: Number,
    // 多個可能的類型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 帶有默認(rèn)值的數(shù)字
    propD: {
      type: Number,
      default: 100
    },
    // 帶有默認(rèn)值的對象
    propE: {
      type: Object,
      // 對象或數(shù)組默認(rèn)值必須從一個工廠函數(shù)獲取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定義驗證函數(shù)
    propF: {
      validator: function (value) {
        // 這個值必須匹配下列字符串中的一個
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

當(dāng) prop 驗證失敗的時候，(開發(fā)環(huán)境構(gòu)建版本的) Vue 將會產(chǎn)生一個控制臺的警告。

• 注意那些 prop會在一個組件實例創(chuàng)建之前進行驗證，所以實例的屬性 (如 data、computed 等) 在 default 或 validator 函數(shù)中是不可用的。

類型檢查

type可以是下列原生構(gòu)造函數(shù)中的一個：

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol
  額外的，type 還可以是一個自定義的構(gòu)造函數(shù)，并且通過 instanceof 來進行檢查確認(rèn)。例如，給定下列現(xiàn)成的構(gòu)造函數(shù)：

function Person (firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
}
// 使用
Vue.component('blog-post', {
  props: {
    author: Person
  }
})

來驗證 author prop 的值是否是通過 new Person 創(chuàng)建的。

非Prop的特性

一個非 prop 特性是指傳向一個組件，但是該組件并沒有相應(yīng) prop 定義的特性。
例如：

<bootstrap-date-input data-date-picker="activated"></bootstrap-date-input>

然后這個 data-date-picker="activated"特性就會自動添加到 <bootstrap-date-input> 的根元素上。

替換/合并以有的特性

想象一下 <bootstrap-date-input> 的模板是這樣的：

<input type="date" class="form-control">

為了給我們的日期選擇器插件定制一個主題，我們可能需要像這樣添加一個特別的類名：

<bootstrap-date-input
  data-date-picker="activated"
  class="date-picker-theme-dark"
></bootstrap-date-input>

在這種情況下，我們定義了兩個不同的 class 的值：

• form-control，這是在組件的模板內(nèi)設(shè)置好的
• date-picker-theme-dark，這是從組件的父級傳入的
  對于絕大多數(shù)特性來說，從外部提供給組件的值會替換掉組件內(nèi)部設(shè)置好的值。所以如果傳入 type="text" 就會替換掉 type="date" 并把它破壞！慶幸的是，class和 style 特性會稍微智能一些，即兩邊的值會被合并起來，從而得到最終的值： form-control date-picker-theme-dark 。

禁用特性繼承

如果你不希望組件的根元素繼承特性，你可以在組件的選項中設(shè)置 inheritAttrs: false。
這尤其適合配合實例的 attrs`，你就可以手動決定這些特性會被賦予哪個元素。在撰寫基礎(chǔ)組件的時候是常會用到的：

Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on:input="$emit('input', $event.target.value)"
      >
    </label>
  `
})

• 注意 inheritAttrs: false 選項不會影響 style 和 class 的綁定。
• $attrs--繼承所有的父組件屬性（除了prop傳遞的屬性、class 和 style ）

自定義事件

觸發(fā)的事件名要和監(jiān)聽這個事件所用的名稱完全匹配，大小寫一致。
推薦你始終使用 kebab-case 的事件名。

自定義組件的v-model

一個組件上的 v-model 默認(rèn)會利用名為 value 的 prop 和名為 input 的事件，但是像單選框、復(fù)選框等類型的輸入控件可能會將 value 特性用于[不同的目的]。model 選項可以用來避免這樣的沖突：

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

將原生事件綁定到組件

你可能有很多次想要在一個組件的根元素上直接監(jiān)聽一個原生事件，這時，你可以使用 v-on 的 .native 修飾符：

<base-input v-on:focus.native="onFocus"></base-input>

在有的時候這是很有用的，不過在你嘗試監(jiān)聽一個類似 <input> 的非常特定的元素時，這并不是個好主意。為了解決這個問題，vue提供了一個 $listeners 屬性，它是一個對象，里面包含了作用在這個組件上的所有監(jiān)聽器。例如：

{
  focus: function(event) { /*...*/ }
  input: function(value) { /*...*/  }
}

有了這個 $listeners 屬性， 你就可以配合 v-on="$listeners" 將所有的事件監(jiān)聽器指向這個組件的某個特定的子元素。對于類似 <input> 的你希望它也可以配合 v-model 工作的組件來說，為這些監(jiān)聽器創(chuàng)建一個類似下述 inputListeners 的計算屬性通常是非常有用的：

Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  computed: {
    inputListeners: function () {
      var vm = this
      // `Object.assign` 將所有的對象合并為一個新對象
      return Object.assign({},
        // 我們從父級添加所有的監(jiān)聽器
        this.$listeners,
        // 然后我們添加自定義監(jiān)聽器，
        // 或覆寫一些監(jiān)聽器的行為
        {
          // 這里確保組件配合 `v-model` 的工作
          input: function (event) {
            vm.$emit('input', event.target.value)
          }
        }
      )
    }
  },
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on="inputListeners"
      >
    </label>
  `
})

現(xiàn)在 <base-input> 組件是一個完全透明的包裹器了，也就是說它可以完全像一個普通的 <input> 元素一樣使用了：所有跟它相同的特性和監(jiān)聽器的都可以工作。

1. 首先，在computed 計算屬性里，創(chuàng)建一個 "inputListeners" 方法。這個方法返回的是這個組件的

監(jiān)聽器。用 object.assign( ) 方法，合并了 this.emit('input',event.target.value)) } ( input 就是新創(chuàng)建的事件/監(jiān)聽器)

2. 在 template 模板中，子元素 <input> 用 v-on 直接綁定 "inputListeners" 方法 ： <input v-on="inputListeners" >

這樣，"inputListeners" 方法里面返回的所有監(jiān)聽器，都被綁在了這個 <input> 這個子元素上了。

$listeners屬性

Vue提供了一個 $listeners 屬性，它是一個對象，里面包含了作用在這個組件上的所有監(jiān)聽器。
這時，可以使用 listeners 屬性里面寫好所有將會需要的監(jiān)聽器（原生事件），這些監(jiān)聽器就可以直接綁定在組件的子元素上（不是根元素）

.sync修飾符

插槽

動態(tài)組件&異步組件

處理邊界情況