Vue組件深入了解(組件注冊和Prop)

一、組件名

自定義組件的名稱強烈推薦遵循W3C規范中的方式：字母全小寫且必須包含一個連字符。

二、全局注冊和局部注冊的區別

• 全局注冊
  Vue.component進行注冊。全局注冊的可以在任何創建的實例中引用。全局注冊往往是不夠理想的，比如你使用webpack這樣的構建系統，全局注冊所有的組件意味着即便你不再使用一個組件了，
  它仍然會被包含在你最終的構建結果中。這就造成用戶的下載JavaScript無謂的增加。
• 局部注冊
  局部注冊可以通過一個普通的對象來定義。

var componentA = {};
var componentB = {};
var componentC = {};

new Vue({
    el: '#app',
    components:{
        'component-a': componentA,
        'component-b': componentB
    }
    //components對象中的‘component-a’是自定義元素的名字，‘component-b’是這個組件的選項對象。
})

注意：局部注冊的組件在其子組件中不可用，如果希望能用，則要這樣做：

var componentA = {};
var componentB = new Vue({
    el: "#aa",
    components:{
        'component-a':'componentA'
    }
})

三、可以通過webpack等工具來實現組件的注冊

• 在模塊系統中可以通過import和export實現局部注冊
  如果你使用了Babel和webpack這樣的模塊系統，那么可以建立一個components目錄， 並將每個組件放置在其各自的文件中
  你在局部注冊之前，需要導入每個你想使用的組件。

import ComponentA from './ComponentA';
import ComponentC from './ComponnetC';

export default {
    components: {
        componentA,
        componentC
    }
}
//現在componentA和componentC都可以在這個組件中使用了。

• 基礎組件的自動化全局注冊
  有一些組件可能只包含一個按鈕或者輸入框，這種稱為基礎組件，想要一次性局部引用這些組件顯得有點繁瑣。所以可以在main.js入口文件中，可以進行自動化全局注冊。

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

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

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

  // 獲取組件的 PascalCase 命名
  const componentName = upperFirst(
    camelCase(
      // 剝去文件名開頭的 `./` 和結尾的擴展名
      fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
    )
  )

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

四、Prop的類型

一般我們在使用prop的時候，就是在注冊組件的時候設置prop，prop通常的類型是字符串數組。

prop: ['dd','fffe','age']

但是通常自己希望每個prop都有指定的值類型。你可以以對象形式列出prop，對應的是prop各自的名稱和值。

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

這樣如果在遇到錯誤的類型時，瀏覽器會在控制台打印出錯誤。prop可以傳遞字符串、數字、布爾值、數組、對象、一個對象的所有屬性

五、Prop驗證

為了定制prop的驗證方式，你可以為props中的值提供一個帶有驗證需求的對象，而不是一個字符串數組。

Vue.component('my-component',{
	props:{
		//基礎類型檢查 （null 匹配任何類型）
		propA: Number,
		//多個可能的類型
		propB: [String,Number],
		//必填的字符串
		propC: {
			type: String,
			require: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驗證都是在新實例創建之前，所以實例的屬性在default或validator函數中是不可用的。

六、禁用特性繼承

如果你不希望子組件的分元素繼承特性，可以在組件的選項中設置inheritAttrs: false.

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>
  `
})

<base-input
  v-model="username"
  class="username-input"
  placeholder="Enter your username"
></base-input>