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>