前端流行框架Vue3教程：18. _组件数据传递

透传 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 的使用示例。

但这个在实际工作中不常用的，本章只做了解即可。