通过 v-bind="$props" 以及v-bind="$attrs" 实现属性透传
很多时候，我们会写一些嵌套组件，比如 A 的子组件是 B，B 的子组件是 C。这个时候如果 A 传递 props 给 B，B 又得传递 props 给 C，我们经常在 B 传给 C 的时候这么写
<template>
<child-component :someprop1="someprop1"
:someprop2="someprop2"
:someprop3="someprop3"
:someprop4="someprop4"
...
/>
</template>
这样是很不优雅的，其实你可以直接使用 v-bind: $props
<template>
<child-component v-bind="$props"/>
</template>
这里我们利用 v-bind 可以传入一个对象的所有 property，类似 v-bind="Obj"。例如，对于一个给定的对象 post
post: {
id: 1,
title: 'My Journey with Vue'
}
下面的模板：
<blog-post v-bind="post"></blog-post>
等价于：
<blog-post
v-bind:id="post.id"
v-bind:title="post.title"
></blog-post>
这个配合 v-bind="$attrs" 在封装一些组件的时候非常有用，比如实现属性透传。
vm.$attrs 包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
比如将上面传递进来的 props 全部绑定到 el-input 中,我们可以在子组件中这么写：
<template>
<div>
<el-input v-bind="$attrs" ></el-input>
</div>
</template>
