关于Vue的inheritAttrs的理解

最新推荐文章于 2025-03-16 10:23:46 发布

野生松

最新推荐文章于 2025-03-16 10:23:46 发布

阅读量1.2w

点赞数 20

分类专栏： Vue深入学习

本文链接：https://blog.csdn.net/qq_38211541/article/details/105824684

版权

Vue深入学习专栏收录该内容

26 篇文章

订阅专栏

本文深入探讨Vue.js中inheritAttrs属性的作用与使用场景。详细介绍了当inheritAttrs设为true或false时，父组件未被识别为props的属性如何影响子组件的根元素。通过代码示例展示了这一特性的具体行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定义：

vue官网对于inheritAttrs的属性解释：默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。

如果你不希望组件的根元素继承特性，你可以在组件的选项中设置 inheritAttrs: false。

这个很不好理解，这里我直接用代码说明：

父组件 parent.vue

<script>
<template>
　<div class="parent">
    <child-component aaa="1111"></child-component>
  </div>
</template>
<script>
import ChildComponent from './child'
export default {
  components: {
    ChildComponent
  }
}
</script>

子组件 child-component.vue （默认 inheritAttrs为true）

<script>
<template>
  <div class="child">子组件</div>
</template>
<script>
export default {
  inheritAttrs: true,
  mounted() {
    console.log('this.$attrs', this.$attrs)
    // 当inheritAttrs为true时：输出this.$attrs， {a: "1111"}
    // 当inheritAttrs为false时：输输出this.$attrs， {a: "1111"}
    // 所以可以看出来$attrs值与inheritAttrs无关
  }
}
</script>

element渲染的结果：