『VUE』27. 透传属性与inheritAttrs（详细图文注释）

什么是透传属性（Forwarding Attributes）

在 Vue.js 中，透传属性（Forwarding Attributes）是指在组件中将父组件传递给子组件的属性，直接传递给子组件内部的某个特定元素或子组件。这样可以使得父组件的属性在子组件中使用，而无需显式地在子组件中声明这些属性。

使用条件唯一根节点

相当于<h3>透传属性</h3>获得了<AttrComponent class="attr-container" />的class="attr-container"

如果有如下结构,有两个h3那么不是唯一的根节点,不会生效

<template><h3>透传属性</h3><h3>透传属性2</h3>
</template>

在这里插入图片描述

App.vue

<template><!-- <GlobalHeader /><Main /><Aside /> --><!-- <Parent /> --><!-- <ComponentEvent /> --><!-- <ComponentP /> --><AttrComponent class="attr-container" />
</template><script>
// import Header from "./page/Header.vue";
// import Main from "./page/Main.vue";
// import Aside from "./page/Aside.vue";
// import Child from "./components/Child.vue";
// import Parent from "./components/Parent.vue";
// import ComponentEvent from "./components/ComponentEvent.vue";
// import ComponentEventSon from "./components/ComponentEventSon.vue";
// import Main from "./components/Main.vue";
// import ComponentP from "./components/ComponentP.vue";
import AttrComponent from "./components/AttrComponent.vue";export default {components: {// Header,// Main,// Aside,// Child,// Parent,// ComponentEvent,// ComponentEventSon,// Main,// ComponentP,AttrComponent,},
};
</script><style scoped></style>
./components/ComponentP.vue

AttrComponent.vue

<template><h3>透传属性</h3>
</template><style>
.attr-container {color: red;
}
</style>

禁用透传属性继承

使用 inheritAttrs: false: 在子组件中将 inheritAttrs 设置为 false，可以阻止自动将父组件的属性应用到根元素上，需要手动处理透传属性。

在这里插入图片描述
AttrComponent.vue

<template><h3>透传属性</h3><!-- <h3>透传属性2</h3> -->
</template><script>
export default {inheritAttrs: false,
};
</script><style>
.attr-container {color: red;
}
</style>