自定义属性props

prop 定义了这个组件有哪些可配置的属性，组件的核心功能也都是它来确定的。写通用组件时，props 最好用对象的写法，这样可以针对每个属性设置类型、默认值或自定义校验属性的值，这点在组件开发中很重要，然而很多人却忽视，直接使用 props 的数组用法，这样的组件往往是不严谨的。

props: {type: {type: String,validator: (value) => {return ['success', 'warning', 'danger'].includes(value)},default: () => 'success'}
}

inheritAttrs与$attrs

inheritAttrs

这是2.4.0 新增的一个API，默认情况下父作用域的不被认作 props 的特性绑定将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。可通过设置 inheritAttrs 为 false，这些默认行为将会被去掉。注意：这个选项不影响 class 和 style 绑定。

1. 父组件

   <Child1 :title="title" :message="message"></Child1>
   

2. 子组件

   <template><div><div>子组件1</div><Child2 v-bind="$attrs"></Child2></div>
   </template><script>
   import Child2 from './child2.vue'
   export default {components: {Child2},// inheritAttrs: false,props: ['title'],created () {console.log(this.$attrs)}
   }
   </script>
   

3. 效果
   

4. 效果分析

   们看到：组件内未被注册的属性将作为普通html元素属性被渲染，如果想让属性能够向下传递，即使prop组件没有被使用，你也需要在组件上注册。这样做会使组件预期功能变得模糊不清，同时也难以维护组件的DRY。在Vue2.4.0,可以在组件定义中添加inheritAttrs：false，组件将不会把未被注册的props呈现为普通的HTML属性。但是在组件里我们可以通过其$attrs可以获取到没有使用的注册属性，如果需要，我们在这也可以往下继续传递。

5.设置了inheritAttrs: false效果

6. 没有申明的属性，默认挂载在组件的根元素上，可以使用inheritAttrs去除掉

$attrs

1. 多级组件嵌套：

   例如：有一个页面由父组件，子组件，孙子组件构成

2. 如果attrs被绑定在子组件上后，我们就可以在孙子组件里获取this.$attrs值。这个{{$attrs}}值是父组件中传递下来的props(除了子组件中props声明的）。

3. 案例

   父组件：

   <template><div>hello world<Child1 :title="title" :message="message"></Child1></div>
   </template>
   

   子组件：

   <div><div>子组件1</div><Child2 v-bind="$attrs"></Child2>
   </div>
   

   孙子组件：

   <template><div>模板2 ---- {{$attrs.message}}</div>
   </template><script>
   export default {created () {console.log(this.$attrs)}
   }
   </script>