inheritAttrsコンポーネント属性VUE

プロパティinheritAttrs説明のための公式ウェブサイトをVUE：あなたはルート要素のコンポーネントのプロパティを継承したくない場合は、アセンブリのオプションを設定することができます inheritAttrs: false。

十分に理解されないことが、私たちは確認するために例を与えることができます。

親コンポーネントの親component.vue

<テンプレート>

<子コンポーネントのAAA = "1111"> </子コンポーネント>

</ div>

</テンプレート>

<スクリプト>

「./child-component」からインポートChildComponent

輸出のデフォルト{

成分：{

ChildComponent

}

</ SCRIPT>

お子様component.vueサブアセンブリに配置されたinheritAttrs：true（デフォルト）

<テンプレート> 
  の<divクラス= "子">子组件</ DIV> 
</テンプレート> 
<スクリプト> 
輸出デフォルト{ 
  inheritAttrs：真、
  マウント（）{ 
    はconsole.log（ 'この$ attrsに。'、この$ attrsに。 ）
  } 
}
 </ SCRIPT>

最終的なレンダリング結果：

要素

コンソール

お子様component.vueサブアセンブリに配置されたinheritAttrs：偽

<テンプレート> 
  の<divクラス= "子">子组件</ DIV> 
</テンプレート> 
<スクリプト> 
輸出デフォルト{ 
  inheritAttrs：fasleは、
  （）{マウント
    はconsole.log（ 'この$ attrsに'、これを$ attrsに。 ）
  } 
}
 </ SCRIPT>

最終的なレンダリング結果：

要素

コンソール

要約：

但し、上記の例から分かるように、親コンポーネントの小道具サブアセンブリの特性が未登録の上を通過します。

1. inheritAttrs設定：trueの場合（デフォルト）、最上位ラベル要素サブアセンブリ（DIV要素本例では）親コンポーネントのプロパティが（本実施AAA =「1111」）上を通過するレンダリング。

2.設定inheritAttrs：偽、トップラベル要素サブアセンブリ（DIV要素本例では）親コンポーネントのプロパティが表示されないが（本実施AAA =「1111」）上を通過させます。

3.かかわらず、真または偽inheritAttrsの、サブアセンブリは、$ attrsにプロパティで親コンポーネントからプロパティ転送に取得することができます。

inheritAttrsコンポーネント属性VUE

おすすめ