本文主要是介绍vue 透传 Attributes，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
Attributes 继承
“透传 attribute”指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。最常见的例子就是 class、style 和 id。
当一个组件以单个元素为根作渲染时，透传的 attribute 会自动被添加到根元素上。举例来说，假如我们有一个 <MyButton> 组件，它的模板长这样：
<!-- <MyButton> 的模板 -->
<button>click me</button>一个父组件使用了这个组件，并且传入了 class：
<MyButton class="large" />最后渲染出的 DOM 结果是：
<button class="large">click me</button>这里，<MyButton> 并没有将 class 声明为一个它所接受的 prop，所以 class 被视作透传 attribute，自动透传到了 <MyButton> 的根元素上。
对 class 和 style 的合并
如果一个子组件的根元素已经有了 class 或 style attribute，它会和从父组件上继承的值合并。如果我们将之前的 <MyButton> 组件的模板改成这样：
<!-- <MyButton> 的模板 -->
<button class="btn">click me</button>v-on 监听器继承
同样的规则也适用于 v-on 事件监听器：
<MyButton @click="onClick" />click 监听器会被添加到 <MyButton> 的根元素，即那个原生的 <button> 元素之上。当原生的 <button> 被点击，会触发父组件的 onClick 方法。同样的，如果原生 button 元素自身也通过 v-on 绑定了一个事件监听器，则这个监听器和从父组件继承的监听器都会被触发。
深层组件继承
有些情况下一个组件会在根节点上渲染另一个组件。例如，我们重构一下 <MyButton>，让它在根节点上渲染 <BaseButton>：
<!-- <MyButton/> 的模板，只是渲染另一个组件 -->
<BaseButton />
此时 <MyButton> 接收的透传 attribute 会直接继续传给 <BaseButton>。
请注意：
-
透传的 attribute 不会包含
<MyButton>上声明过的 props 或是针对emits声明事件的v-on侦听函数，换句话说，声明过的 props 和侦听函数被<MyButton>“消费”了。 -
透传的 attribute 若符合声明，也可以作为 props 传入
<BaseButton>。
这篇关于vue 透传 Attributes的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
