$attrs

 vue2

​​​​​​透传 Attributes 是指由父组件传入，且没有被子组件声明为 props 或是组件自定义事件的 attributes 和事件处理函数。

1.含义：父组件向子组件传的参数，未被子组件的props接收，都会在$attrs中出现

//父组件A
<template>
  <div class="a">
    <div>A: {{a}}</div>
    <B class="a-b" :b="a" :c="'1'" :d="'2'" ></B>
  </div>
</template>


//子组件B
<template>
  <div class="b">
    <div>B: {{ b }}</div>
    <div>C: {{ $attrs.c }}</div>
    <C v-bind="$attrs"></C>
  </div>
</template>
<script>
import C from "./C.vue";
export default {
  name: "",
  inheritAttrs: true, //去除子组件根节点的绑定，但依然可以用$sttrs访问到，且可用v-bind="$attrs"继续向下传递
  props: {
    b: Number,
  },
  components: {
    C,
  },
  data() {
    return {};
  },

  created() {
    console.log("attr: ", this.$attrs); //attr:  {c: '1', d: '2'}
  },

};
</script>



//子组件C
<template>
  <div class="c">
    C: {{$attrs.c}}
  </div>
</template>

页面显示

 

2.inheritAttrs

可以在父组件设置属性、传参等，子组件的根元素会默认继承。如果想要去除绑定，可以使用inheritAttrs

在 B组件页面内有描述，作用：设置false, 可去除子组件根节点的绑定，但依然可以用$attrs访问到，且可用v-bind="$attrs"继续向下传递

inheritAttrs=true

 inheritAttrs=false