Vue attrs

梗概:

• 每个组件都有的内置属性
• 保存着外部调用该组件的时候, 所传入的所有html属性，但是除了被props接受的属性（当然这是可以被配置的）

适用范围

• 快速做属性传递中转
  • 无需像props一样，繁琐的定义接受再传递

示例

父组件的代码：

<template>
  <div>
    <child-dom :foo="foo" :bar="bar"></child-dom>
  </div>
</template>
​
<script>
import ChildDom from "../components/attrs/ChildDom.vue";
export default {
  components: {
    ChildDom,
  },
  data() {
    return {
      foo: "foo",
      bar: "bar",
    };
  },
};
</script>

子组件的代码：

<template>
  <div>
    <p>foo:{{ foo }}</p>
  </div>
</template>
​
<script>
export default {
  props: ["foo"],
};
</script>

在2.4中新增选项inheritAttrs，inheritAttrs的默认值为true, 将inheritAttrs的值设为false, 这些默认的行为会禁止掉。但是通过实例属性 $attrs ,可以将这些特性生效，且可以通过v-bind 绑定到子组件的非根元素上。

将子组件的代码修改一下：

<template>
  <div>
    <p>foo:{{ foo }}</p>
    <p>attrs: {{ $attrs }}</p>
    <dom-child v-bind="$attrs"></dom-child>
  </div>
</template>
​
<script>
import DomChild from "./DomChild.vue";
export default {
  props: ["foo"],
  inheritAttrs: false,
  components: {
    DomChild,
  },
};
</script>

然后在加一个孙组件

<template>
  <div>
    <p>bar:{{ bar }}</p>
  </div>
</template>
​
<script>
export default {
  props: ["bar"],
};
</script>

页面显示如下：