我們在vue的父子元件傳值的時候，我們先在需要的子元件上用props註冊一些屬性，然後父元件呼叫的時候當屬性來傳值。
如果我們給child傳props沒有註冊的屬性，我們就要用$attrs來取了。

現有父元件A和子元件B:
元件A的內容如下：

<template>
    <div>我是父元件
        <B :w1="hello" :w2="world" :w3="lisa"></B>
    </div>
</template>
<script>
import B from './myB'
 

export default {
    components:{B},
    data(){
        return{
            hello:'hello',
            world:"world",
            lisa:"myname"
        }
    }
}
</script>

元件B的內容如下：

<template>
    <div>
        我是子元件{{w1}}
    </div>
</template>
<script>
export
 
 default {
    props:["w1"],
    inheritAttrs:false,
    data(){
        return{

        }
    },
    mounted(){
        console.log(this.$attrs)
    }
}
</script>

元件B只匯出了w1，在元件A中呼叫時，多了幾個屬性w2,w3，在元件B中可以使用console.log(this.$attrs)檢視非prop屬性，結果為一個物件{w2: “world”, w3: “myname”}
但是在控制檯看到B元件的根元素div上出現了這兩個屬性，顯示結果為：
<div w2=“world” w3=“myname”>

export default {
    props:["w1"],
    inheritAttrs:false,
    data(){
			return{}
		}
    }

inheritAttrs

inheritAttrs:false，如果你不希望元件的根元素繼承特性，你可以在元件的選項中設定，這尤其適合配合例項的 $ attrs 屬性使用，該屬性包含了傳遞給一個元件的特性名和特性值。
1.inheritAttrs預設為true，即允許繼承的意思，如果設為false，即禁止繼承。
2.$attrs為元件標籤內沒有在元件內用props宣告的屬性（除了style和class）

小結：
$ attrs
$ attrs儲存非prop特性，$attrs繼承所有的父元件屬性，但是除了prop傳遞的屬性，style和class
inheritAttrs
inheritAttrs控制vue對非prop特性的預設行為。預設為true，繼承所有的父元件屬性（除props的特定繫結）作為普通的HTML特性應用在子元件的根元素上，如果你不希望元件的根元素繼續特性設定inheritAttrs:false，但是class屬性會繼承。

多級元件傳遞資料

現有A,B,C三個元件依次巢狀，示例：

A到B可以通過props的方式向子元件傳遞值，如果A元件與C元件之間通過怎麼辦呢？
A和C之間屬於跨多級的元件巢狀關係，要解決這一問題可以使用 $ attrs解決。

在元件C中,程式碼如下：

<template>
<!-- 有兩個值，c1是去A元件中獲取值，bb是去B元件中獲取值 -->
  <div>我是元件C,我要說"{{c1}}",我給B發訊息{{bb}}</div>
</template>
<script>
export default {
  // 通過props到處變數bb,c1
  props: ["bb", "c1"],
  data() {
    return {};
  }
};
</script>

在元件B中程式碼如下：

<template>
  <div>
    我是B元件,我要說“{{b1}}”
    <!-- 給元件C的bb賦值 -->
    <C :bb="bb"></C>
  </div>
</template>
<script>
// 匯入元件C
import C from "./C";
export default {
  inheritAttrs: false,//禁止繼承父元件的非prop屬性
  props: ["b1"],//匯出變數b1
  components: { C },//註冊元件C
  data() {
    return {
      bb: "你好"
    };
  }
};
</script>

在元件A程式碼中：

<template>
  <div>
    我是元件A的內容
    <!-- 呼叫元件B 使用$attrs繫結非prop屬性，並給屬性賦值-->
    <B :c1="c1" :b1="b1" v-bind="$attrs"></B>
  </div>
</template>
<script>
import B from "./B";//匯入元件B
export default {
  components: { B },//註冊元件B
  data() {
    return {
      c1: "我是c",
      b1: "我是b"
    };
  }
};
</script>