$ ATTRS / inheritAttrsコンポーネントは、ステージ転送渡って達成することができます
質問1 //なぜ、この。$ attrsにはから次転写の値を取得することができます
// $ ATTRS説明
// $ ATTRSは簡単に書き込み小道具の痛みを避けるために、使用することが比較的簡単であり、透明性の伝送特性を達成することができます。
（スタイルとクラスを除く）渡された上部アセンブリのすべてのデータが含まれています//コンポーネントがどの小道具時間を宣言していない、attrsに
コンポーネントは、小道具の時間を宣言//とき、attrsには、残りのデータ内のデータが含まれている小道具を削除します。
// inheritAttrs
// 1.サブアセンブリinheritAttrsに配置されたときは：プロパティは、HTMLは、ノードDOMに属性データをレンダリングするようではありません偽の時、attrsに。
// 2. inheritAttrsサブアセンブリに設定されていない場合は、HTML上のノードをレンダリングプロパティをATTRS
// 3. inheritAttrsに設定した場合：虚偽の陳述で、サイクルコンポーネントはattrsには、上側の部品データの中に入るこの$によって作成することができ、。
サブアセンブリinheritAttrsに配置された//とき：falseの時、何のスタイル属性とクラスが存在しないATTRS
// $ ATTRS / $リスナーは兄弟間だけのクロスステージ転送することはできません
//コンポーネントが最大の部品導入GO1の内側に行きます
GO2コンポーネント内部// GO1コンポーネント
// GO2そこGO3コンポーネント
go.vue
<テンプレート>
の<div>
我是行く
< GO1
：FOO = "foo"という
：BOO = "ブーイング"
：COO = "クー"
：斗 = "斗"
> </ GO1>
</ div>
</テンプレート>
<スクリプト>
インポートGO1から」../go1/go1"
輸出のデフォルト{
データ（）{
リターン{
FOO： "Javascriptを" 、
BOO： "HTML" 、
COO： "CSS" 、
斗： "Vueの"
}
}、
成分：{
GO1
}
}
</ SCRIPT>
go1.vue
<template>
<div>
<h2>-----------------</h2>
<br>
我是go1111
<!-- <p>foo: {{ foo }}</p> -->
<!-- <p>go1得到主组件中的数据$attrs: {{ $attrs }}</p> -->
<go2 v-bind="$attrs"></go2>
<br>
<h2>-----------------</h2>
</div>
</template>
<script>
import go2 from "../go2/go2"
export default {
components:{
go2
},
inheritAttrs: false, // .当设置为inheritAttrs: false的时候，在组件的声明周期中可以通过 this.$attrs 获取里面的上层组件数据。
props: { foo: String // 当声明了prop时候，attrs里面包含除去prop里面的数据剩下的数据。 所以下面没有 Javascript
},
created() {
console.log("我在1出输出",this.$attrs); // {boo: "Html", coo: "CSS", doo: "Vue"}
}
}
</script>
go2.vue
<template>
<div>
<h2>-----------------</h2>
<br>
go222
<p>boo: {{ boo }}</p>
<p>childCom2: {{ $attrs }}</p>
<go3 v-bind="$attrs"></go3>
<br>
<h2>-----------------</h2>
</div>
</template>
<script>
import go3 from "../go3/go3"
export default {
components:{
go3
},
inheritAttrs: false,
props: {
boo: String //当声明了prop时候，attrs里面包含除去prop里面的数据剩下的数据。 所以下面没有 html
},
created() {
console.log("我是组件2",this.$attrs); // 我是组件2 {coo: "CSS", doo: "Vue"}
}
}
</script>
go3.vue
<template>
<div>
<h2>-------</h2>
<br>
go333
<p>childCom3: {{ $attrs }}</p>
<h2>-------</h2>
<br>
</div>
</template>
<script>
export default {
props: {
coo: String, //当声明了prop时候，attrs里面包含除去prop里面的数据剩下的数据。 所以下面没有 coo
},
created() {
console.log("我是组件3",this.$attrs); // 我是组件2 { doo: "Vue"}
}
}
</script>
