Vue中的$attrs和inheritAttrs

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"传递参数