AI专业者开发社区 1 号成员
  •  0 回帖  •  8 浏览  •  4 个月前
 

vue组件的inheritAttrs属性

vue 官网对于 inheritAttrs 的属性解释：如果你不希望组件的根元素继承特性，你可以在组件的选项中设置 inheritAttrs: false。

可能不是很好理解，我们可以举个例子来验证一下。

父组件 parent-component.vue

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

子组件 child-component.vue  设置 inheritAttrs: true（默认）

<template>
  <div class="child"> 子组件 </div>
</template>
<script>
export default {
  inheritAttrs: true,
  mounted() {
    console.log('this.$attrs', this.$attrs)}}
</script>

最后渲染的结果：

Elements

Console

 

 子组件 child-component.vue  设置 inheritAttrs: false

 

<template>
  <div class="child"> 子组件 </div>
</template>
<script>
export default {
inheritAttrs: fasle,
  mounted() {
    console.log('this.$attrs', this.$attrs)}}
</script>

最后渲染的结果：

Elements

Console

 

总结：

由上述例子可以看出，前提：子组件的 props 中未注册父组件传递过来的属性。

1. 当设置 inheritAttrs: true（默认）时，子组件的顶层标签元素中（本例子的 div 元素）会渲染出父组件传递过来的属性 (本例子的 aaa="1111")。

2. 当设置 inheritAttrs: false 时，子组件的顶层标签元素中（本例子的 div 元素）不会渲染出父组件传递过来的属性 (本例子的 aaa="1111")。

3. 不管 inheritAttrs 为 true 或者 false，子组件中都能通过 $attrs 属性获取到父组件中传递过来的属性。