Vue指令——$attr屬性的使用方法詳解

一、$attr屬性簡介

在Vue.js中，$attr屬性是一個對象，它包含了非prop綁定的特性，即父組件傳給子組件的所有屬性。$attrs對象是沒有響應性的，即當父組件修改屬性時，子組件並不會獲得更新。但是，如果使用v-bind=”$attrs”將$attrs綁定到子組件中，那麼子組件會繼承父組件的所有非prop特性，且當父組件更新這些特性時，子組件也會隨之更新。

    <!-- 父組件 -->
    <template>
      <ChildComponent v-bind="$attrs" />
    </template>

    <!-- 子組件 -->
    <template>
      <input v-bind="$attrs" />
    </template>

二、$attr屬性與$props屬性的關係

在Vue.js中，$attr屬性和$props屬性是息息相關的。可以用$attr屬性和$props屬性結合，完成父組件值向子組件值的傳遞。

在子組件中，可以使用$props來獲取通過props傳遞的值，使用$attrs獲取通過非prop特性傳遞的值。如果想在子組件中獲取不論是通過prop還是非prop傳遞的值，可以使用$props和$attrs結合。

    <!-- 父組件 -->
    <template>
      <ChildComponent :prop1="prop1" :prop2="prop2" prop3="prop3" />
    </template>

    <!-- 子組件 -->
    <template>
      <div>
        <p>{{ $props.prop1 }}</p>
        <p>{{ $props.prop2 }}</p>
        <p>{{ $attrs.prop3 }}</p>
        <p>{{ $attrs.class }}</p>
      </div>
    </template>

    <script>
      export default {
          props: {
            prop1: {
              type: String
            },
            prop2: {
              type: String
            }
          }
      }
    </script>

三、使用$attr屬性處理未知屬性

在子組件中，如果使用v-bind=”$attrs”將非prop特性綁定到子組件中時，會將父組件傳遞的所有未知屬性都傳遞給子組件。對於未知屬性，子組件會將其渲染成HTML特性，並且不會替換已有的特性。

    <!-- 父組件 -->
    <template>
      <ChildComponent title="Title" content="Content" />
    </template>

    <!-- 子組件 -->
    <template>
      <div>
        <p>{{ $attrs.title }}</p>
        <p>{{ $attrs.content }}</p>
      </div>
    </template>

四、使用$attr屬性控制特性順序

在子組件中，使用v-bind可以將$attrs屬性綁定到子組件中，並控制特性的順序。可以結合對象展開運算符與v-bind，將$attrs中的特性添加到元素的特性列表中，並控制其順序。

    <!-- 父組件 -->
    <template>
      <ChildComponent class="class1" id="my-id" v-bind="$attrs" />
    </template>

    <!-- 子組件 -->
    <template>
      <div :class="$attrs.class" :id="$attrs.id" v-bind="$attrs">
      </div>
    </template>

五、$attrs屬性在遞歸組件中的使用

在遞歸組件中，父組件不知道遞歸組件的深度，所以無法為每一層遞歸組件都設置一個props。在這種情況下，可以使用$attrs屬性向下傳遞數據。

    <!-- 父組件 -->
    <template>
      <RecursiveComponent :level="1" class="my-class" />
    </template>

    <!-- 遞歸組件 -->
    <template>
      <div :class="$attrs.class">
        <p>Level {{ $props.level }}</p>
        <RecursiveComponent :level="$props.level + 1" v-bind="$attrs" />
      </div>
    </template>