透傳 Attributes

透傳attribute指的是傳遞給一個組件，卻沒有被該組件聲明為props或emits的attribute或者v-on事件監聽器。最常見的例子就是class、style和id
當一個組件以單個元素為根作渲染時，透傳的attribute會自動被添加到根元素上

---

透傳 Attributes 是 Vue 的一個特性，允許父組件傳遞任意屬性到子組件上，而無需顯式聲明。這在封裝可復用的組件時非常有用。

步驟 1: 創建子組件

創建一個名為 AttrComponents.vue 的子組件，并定義一個模板部分：

<template><!--  必須是唯一元素  如果多了其他元素 就不生效  比如<p><h2>等--><h3>透傳屬性</h3>
</template>

這個組件沒有顯式聲明任何 props 或其他屬性處理邏輯。

步驟 2: 在父組件中使用子組件

在你的主組件 App.vue中導入并注冊子組件 AttrComponents：

<script>
import AttrComponents from "./components/AttrComponents.vue"export default {components: {AttrComponents}
}
</script><template><AttrComponents class="attr-container"/>
</template><style>
.attr-container {color: red;
}
</style>

在這個例子中，我們通過 class="attr-container" 將樣式類傳遞給子組件。

步驟 3: 使用透傳的屬性

當子組件接收到這些屬性時，它們會自動應用到子組件的根元素上。在上面的例子中，class="attr-container" 被應用到了 <h3> 元素上，因此 <h3> 的文字顏色將會是紅色。

注意事項

• 透傳的屬性會直接綁定到組件的根元素上。

• 如果你在子組件中需要對屬性進行更復雜的處理，可以使用 props顯式聲明它們。

• 如果你不希望某些屬性被自動綁定，你可以使用inheritAttrs選項來控制。

  <template><!--  必須是唯一元素  如果多了其他元素 就不生效  比如<p><h2>等--><h3>透傳屬性</h3>
  </template>
  <script> 
  export default {inheritAttrs:false
  }
  </script>
  

這樣你就完成了一個簡單的透傳 Attributes 的使用示例。

但這個在實際工作中不常用的，本章只做了解即可。