[vue] vue实例中的$attr

vue实例中的$attr

官方文档给出的解释是

包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

下面我们来作个简单的 demo 来测试
我们定义一个 ALink 组件

<template>
  <a href="">
    <slot></slot>
  </a>
</template>
<script>
  export default {
    props: {
      name: String,
      href: String
    },

    created() {
      console.log(this.$attrs)
    }
  }
</script>

在别处引用此组件

<ALink href="/index" name="abc" target="_blank" :class="{isSmall: true, isDisabled: true}">123</ALink>

就像文档说的一样，因为href 和 name 都是 ALink组件内部定义的属性，而$attr又不包含 class 和 style，因此 $attr 的值为

{target: "_blank"}