[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"}