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...