深入组件一、组件注册，Props，非 Prop 的 Attribute，自定义事件

前面分了五个章节讲了Vue的基础内容，从最简单的定义，到组件基础。有了这5个章节，让我们对vue有了基本的了解，有了这些基础也可以开发简单的应用了，以为接下的深入学习打下了基础。

一、组件注册

定义的组件名字必须为字母全小写且必须包含一个连字符。这会帮助你避免和当前以及未来的 HTML 元素相冲突。

<my-component-name> 和 <MyComponentName> 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

组件全局注册方式：

 app.component('component-a', { 2 /* ... */ 3 }) 

 局部注册方式就是我们在基础章节时使用的示例就是局步注册的。

二、Prop

每个 prop 都可以是指定的值类型。这时，可以以对象形式列出 prop，这些 property 的名称和值分别是 prop 各自的名称和类型： 

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // 或任何其他构造函数
}

 数据的传递也就是属性的赋值，这个就比较简单了不再列出示例。下面来看一下数据类型的验证：

 props: {
    // Basic type check (`null` and `undefined` values will pass any type validation)
    propA: Number,
    // Multiple possible types
    propB: [String, Number],
    // Required string
    propC: {
      type: String,
      required: true
    },
    // Number with a default value
    propD: {
      type: Number,
      default: 100
    },
    // Object with a default value
    propE: {
      type: Object,
      // Object or array defaults must be returned from
      // a factory function
      default: function() {
        return { message: 'hello' }
      }
    },
    // Custom validator function
    propF: {
      validator: function(value) {
        // The value must match one of these strings
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    },
    // Function with a default value
    propG: {
      type: Function,
      // Unlike object or array default, this is not a factory function - this is a function to serve as a default value
      default: function() {
        return 'Default function'
      }
    }
  }

 这个也没什么好解释的，一看就懂。

三、非 Prop 的 Attribute

 一个非 prop 的 attribute 是指传向一个组件，但是该组件并没有相应 props 或 emits 定义的 attribute。常见的示例包括 class、style 和 id 属性。

当组件返回单个根节点时，非 prop attribute 将自动添加到根节点的 attribute 中。如果不希望组件的根元素继承 attribute，可以在组件的选项中设置 inheritAttrs: false。 

{
  inheritAttrs: false,
  template: `
    <div class="date-picker">
      <input type="datetime" v-bind="$attrs" />
    </div>
  `
}

四、自定义事件

与组件和 prop 一样，事件名提供了自动的大小写转换。如果用驼峰命名的子组件中触发一个事件，将可以在父组件中添加一个 kebab-case (短横线分隔命名) 的监听器。可以通过 emits 选项在组件上定义已发出的事件。当在 emits 选项中定义了原生事件 (如 click) 时，将使用组件中的事件替代原生事件侦听器。与 prop 类型验证类似，如果使用对象语法而不是数组语法定义发出的事件，则可以验证它。要添加验证，将为事件分配一个函数，该函数接收传递给 $emit 调用的参数，并返回一个布尔值以指示事件是否有效。

 {
  emits: {
    // 没有验证
    click: null,

    // 验证submit 事件
    submit: ({ email, password }) => {
      if (email && password) {
        return true
      } else {
        console.warn('Invalid submit event payload!')
        return false
      }
    }
  },
  methods: {
    submitForm() {
      this.$emit('submit', { email, password })
    }
  }
}