vue组件封装技巧

$attrs

用途：在对组件进行二次封装的时候会出现孙子组件的传值问题，如果都通过prop进行层层传递太过麻烦，可以选择不使用props传值而通过$attrs传递

定义：包含了父作用域中不被认为 (且不预期为) props 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 props 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind=”$attrs” 传入内部组件——在创建更高层次的组件时非常有用。

用法：父组件正常传入数据，子组件通过在孙组件上v-bind=:"$attrs"将未props声明的数据传递，孙组件通过this.$atrs.xxx进行使用
父组件：

子组件

子组件打印$attrs

孙组件

孙组件打印$attrs

$listeners

同$attrs的作用类似，$listeners可以将孙组件的事件和参数传递给父组件
孙组件：

子组件：

其中console打印：

父组件：
父组件中正常使用即可


注：打印中msgA多执行了一次且是undefined是因为子组件中事件进行了从写重写；需要删掉；如果子组件需要用到改事件，暂不知道用法

inheritAttrs

定义：官方定义
父组件：

子组件
设置inheritAttrs: true时，


设置为false 时

不过通过$attrs依然能获得传入的数据。

provide/inject

https://cn.vuejs.org/v2/api/
可用于祖孙级组件直接的传值
provide 选项应该是一个对象或返回一个对象的函数
inject 选项应该是：
一个字符串数组，或一个对象，对象的 key 是本地的绑定名