关于Vue的inheritAttrs的理解
定义:vue官网对于inheritAttrs的属性解释:默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。如果你不希望组件的根元素继承特性,你可以在组件的选项中设置inheritAttrs: false。这个很不好理解,这里我直接用代码说明:...
·
定义:
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渲染的结果:
- 当inheritAttrs为true时
- 当inheritAttrs为false时
更多推荐
已为社区贡献4条内容
所有评论(0)