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

props属性 与 非props属性

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

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

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

<template>
    <div id="child-comp">
        <div>{{ foo }}</div>
        <div>{{ coo }}</div>
    </div>
</template>
<script>
export default {
    name: 'child-comp',
    props: ['foo', 'coo'],//propps属性
    data() {
        return { }
    },
}
</script>

然后父组件调用的时候：

<template>
    <child-comp :foo='param_a' :coo='param_b'></child-comp>
</template>
<script>
import ChildComp from './child-comp'
export default {
    components: { ChildComp },
    data() {
        return {
            param_a: 'aaa',
            param_b: 'bbb'
        }
    }
}
</script>

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

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

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

<child-comp :foo='param_a' :coo='param_b' :doo="'xxxxxx'"></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属性的集合，假设调用子组件代码如下：

<child-comp :foo='param_a' :coo='param_b' :doo="'xxxxxx'"></child-comp>

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

<template>
    <div id="child-comp">
        <div>{{ foo }}</div>
        <div>{{ $attrs }}</div>
    </div>
</template>
<script>
export default {
    inheritAttrs: false,
    name: 'child-comp',
    props: ['foo'],//propps属性
}
</script>

$listeners 属性及其作用

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

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

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

<b-comp v-bind="$attrs" v-on="$listeners"></b-comp>

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

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