透传 Attributes(详细解析)1
在 Vue 组件开发中,“透传 Attributes”是一个高频出现的概念,理解它能帮助我们更灵活地处理组件间的属性和事件传递。本章节将基于组件基础,对透传 Attributes 的相关知识进行全面且细致的解析。
Attributes 继承:默认的“自动透传”机制
“透传 attribute”指的是传递给组件,但未被该组件声明为 props 或 emits 的 attribute(如 class、id、自定义属性等)以及 v-on 事件监听器。Vue 对这类属性有默认的“继承”行为——当组件以单个元素为根节点渲染时,透传的 attribute 会自动添加到根元素上。
基础示例:自动透传到根元素
假设我们有一个 <MyButton>
组件,其模板仅包含一个原生 <button>
元素(单根节点):
<!-- <MyButton> 的模板 --> <template> <button>Click Me</button> </template>
父组件使用 <MyButton>
时,传入一个未被 <MyButton>
声明为 props 的 class
属性:
<!-- 父组件模板 --> <template