Vue inheritAttrs 属性的使用
官方给出的解释如下:1、inheritAttrs 为true(默认值),子组件的根元素会自动绑定父组件传过来的(非prop)属性,若根元素本身也声明了同样的属性,会被覆盖,如图所示父组件调用子组件,传递属性 myattr:子组件 (child) 的根元素上自定义属性 myattr:最终渲染效果,子组件的根元素 myattr属性会被覆盖2、inheritAttrs 为false最终渲染效果,子组件的
·
官方给出的解释如下:
1、inheritAttrs 为true(默认值),子组件的根元素会自动绑定父组件传过来的(非prop)属性,若根元素本身也声明了同样的属性,会被覆盖,如图所示
父组件调用子组件,传递属性 myattr:
<div>
我是父组件
<child myattr="父组件传向子组件的attr">
</div>
子组件 (child) 的根元素上自定义属性 myattr:
<template>
<div myattr="child的myattr">
我是子组件
</div>
</template>
最终渲染效果,子组件的根元素 myattr属性会被覆盖
2、inheritAttrs 为false
export default {
name: 'Child',
props: {},
inheritAttrs: false
}
最终渲染效果,子组件的根元素 myattr属性不会被覆盖
当然在子组件中可通过this.$attrs访问父组件传过来的属性,或者通过v-bind="$attrs"使用,如下图所示:
<template>
<div myattr="child的myattr" v-bind="$attrs">
我是子组件
</div>
</template>
更多推荐
已为社区贡献1条内容
所有评论(0)