vue组件的inheritAttrs属性

2019-06-29 12:00:35 阅读：182 来源： 互联网

标签：vue false inheritAttrs attrs 组件属性

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属性获取到父组件中传递过来的属性。

标签：vue,false,inheritAttrs,attrs,组件,属性
来源： https://www.cnblogs.com/luyuefeng/p/11106172.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue组件的inheritAttrs属性