vue inheritAttrs官方解释:
vue $attrs
适用场景:如果页面存在多层组件嵌套,要把所需要参数从最外层父组件传给底层的组件,则需要层层在组件上绑定参数,并在props中接收参数,并传给下一层级的组件
为解决该问题,只需要在每一层级的组件中,只在props中定义自己需要的数据,并将$attrs传递给下一层级的组件就可以
代码示例
inheritAttrs:
<template>
<div parten-test="父组件的传递参数">
父组件
</div>
</template>
<template>
<div class='child-wrap' parten-test='子组件该显示的child'>子组件</div>
</template>
inheritAttrs:true - 渲染效果:
inheritAttrs:false - 渲染效果:
$attrs:
既是props未接收父组件传递过来的参数也可以通过this.$attrs访问父组件传过来的属性,或者通过v-bind="$attrs"使用
<template>
<div class='child-wrap' parten-test='子组件该显示的child' v-bind="$attrs">子组件</div>
</template>
this.$attrs 输出 减掉了 子组件中props接收的参数
如果有多层组件 可以直接在组件引用上v-bind="$attrs"传递参数