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

news2024/11/17 1:18:39

什么是透传属性（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>