【Vue】从官方文档中扒拉出来的小技巧，看看你知道那些吧

想着作为一个 Vuer，平时却没有怎么好好的看过官方文档，这次找了个时间看了一番，不得不说 Vue 的文档写的还是很详细的。从里面整理出来一些小技巧，希望能帮助大家提高平时的开发效率。毕竟：

传输一个对象的所有属性

平时我们在开发的时候，经常会通过父组件给子组件传递很多 prop，一般我们可能会这样写：

<child-comp
    :prop1="prop1"
    :prop2="prop2"
    :prop3="prop3"
    :prop4="prop4"
    ...
></child-comp> 

这样写当然也是没问题的, 但是这样的写法并不是很优雅，并且每需要多传一个属性给子组件，我就需要多写一个类似:prop="prop"的属性传递，写多了也很繁琐。

其实我们可以使用 v-bind="object"来代替一个个的 :prop-name="propValue", v-bind会传递这个对象中的所有 property给子组件。

假设我们要传递给子组件这么一些属性

post: {
  id: 1,
  title: 'My Journey with Vue'
} 

通过 v-bind，我们可以写成这样：

<child-comp v-bind="post"></child-comp> 

这种写法其实是等同于下面这种写法的，但是会方便很多。

<child-comp v-bind:id="post.id" v-bind:title="post.title"></child-comp> 

$attrs 实现透传

包含了父作用域中不作为组件 props 或自定义事件的 attribute 绑定和事件。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定，并且可以通过 v-bind="$attrs" 传入内部组件——这在创建高阶的组件时会非常有用。

简单来说，就是在父作用域传给子组件的一些属性或者事件，但是在子作用域又没有进行定义的，都会被包含在 $attrs 里面，比如 class，style，id，在创建高阶的组件的时候非常有用。

我们在用基础组件的时候，往往需要根据业务场景对这些基础组件进行一些封装，这时候 $attrs就能发挥很大的作用。通过 v-bind="$attrs"，轻松实现属性透传。

但是当组件是单个根节点时，非 prop 的 attribute 会自动添加到根结点的 attribute 上，这时候我们可以通过设置inheritAttrs: false将其禁用,以保证非 prop 的 attribute只在我们添加的元素上生效。

// 子组件
<template>
  <div>$attrs: <input v-bind="$attrs" /></div>
</template&