props属性、非props属性、inheritAttrs、$attrs和$listeners使用

props属性 与 非props属性

这是两个非常简单的概念，但是却非常重要，只有理解了他们，会更有利于我们理解inheritAttrs 和 $attrs。

非props属性官方解释是：一个非 prop 特性是指传向一个组件，但是该组件并没有相应 prop 定义的特性。

例如：假设我定义了一个组件child-comp如下：

然后父组件调用的时候：

结论：在调用子组件child-comp的时候，我们传递过去的属性foo、coo，因为在组件child-comp中已经通过props属性定义了，所以叫props属性；如果未定义，例如：child-comp的props中只定义了foo属性，那么传递过去的coo就是非props属性了。

非props属性的特点：会在组件根（dom）节点上添加html属性。

假设：我们把调用child-comp组件的代码改为：

其实只是多传递了一个参数:doo="'xxxxxx'"，因为未在子组件child-comp中定义，所以是非props属性，当我们f12查看生成的html时，会看到如下：

inheritAttrs 属性以及作用

在我们知道了props属性和非props属性的前提下，inheritAttrs属性就非常好理解了。

结论：当一个组件设置了inheritAttrs: false后（默认为true），那么该组件的非props属性将不会在组件根节点上生成html属性。

例如上面的例子中，虽然传递了非props属性 :doo，但是如果你把组件child-comp的属性inheritAttrs设为false，那么你将看到如下情景：

$attrs 属性及其作用

$attrs其实就是非props属性的集合，假设调用子组件代码如下：

而子组件只定义了props属性foo，那么，在child-comp使用$attrs就相当于获取到了coo、doo这两个非props属性了：

$listeners 属性及其作用

$attrs和 $listeners其实是非常类似的，前者表示组件的 非props属性的集合，而 $listeners则表示所有传递过来的 事件的集合。

这在跨组件深层次传递数据和绑定事件非常有用。

假设一个场景：我们有三个组件，引用关系是a组件引用b组件，b组件引用c组件，我们需要把a组件中的数据传递到c组件中，而c组件通过$emit把数据回传到a组件，这就是前面说的——a引用b，b引用c，按照以前的做法，我们需要在b中定义一些和b无关的属性和事件方法，这严重污染了b组件，显然很不理想。用了$attrs 和 $listeners，那么b组件就非常简单了：

参考：
https://www.cnblogs.com/mengf...

https://www.jianshu.com/p/268...