2-5-vue框架-组件-vue-component组件化开发-透传Attributes（（父传子，不常用，但是要知道）

Attributes 继承​

“透传 attribute”指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。最常见的例子就是 class、style 和 id。

当一个组件以单个元素为根作渲染时，透传的 attribute 会自动被添加到根元素上。举例来说，

子组件

<template>
  <button>click me</button>
</template>

<script>
export default {
}
</script>

父组件

一个父组件使用了这个组件，并且传入了 class：

<template>
  <MyButton class="large" />
</template>

<script>
import MyButton from './components/demo1.vue'

export default {
  components: { MyButton },
}
</script>

最后渲染出的 DOM 结果是：

<button class="large">click me</button>

这里， 并没有将 class 声明为一个它所接受的 prop，所以 class 被视作透传 attribute，自动透传到了 的根元素上。

使用限制1：子组件必须只有一个元素

子组件里面必须是只有一个元素，如果有多个元素就谁都不会生效，
比如：

<template>
  <button>click me</button>
  <button>click me</button>
</template>

<script>
export default {
}
</script>

• 这种和单根节点组件有所不同，有着多个根节点的组件没有自动 attribute 透传行为。
• 有下面这样的多根节点模板，由于 Vue 不知道要将 attribute 透传到哪里，所以会抛出一个警告。

如何解决: 使用 v-bind="$attrs"

<template>
  <button>click me</button>
  <button v-bind="$attrs">click me</button>
</template>

<script>
export default {
}
</script>

对 class 和 style 的合并​

如果一个子组件的根元素已经有了 class 或 style attribute，它会和从父组件上继承的值合并。如果我们将之前的 组件的模板改成这样：

<!-- <MyButton> 的模板 -->
<button class="btn">click me</button>

则最后渲染出的 DOM 结果会变成：

<button class="btn large">click me</button>

v-on 监听器继承​

同样的规则也适用于 v-on 事件监听器：
父组件：

<MyButton @click="onClick" />

click 监听器会被添加到 <MyButton> 的根元素，即那个原生的 <button> 元素之上。当原生的 <button> 被点击，会触发父组件的 onClick 方法。
同样的，如果原生 button 元素自身也通过 v-on 绑定了一个事件监听器，则这个监听器和从父组件继承的监听器都会被触发。

禁用 Attributes 继承​

如果你不想要一个组件自动地继承 attribute，你可以在组件选项中设置 inheritAttrs: false。
比如：

<template>
  <button>click me</button>
</template>

<script>
export default {
  inheritAttrs: false
}
</script>

总结

使用率比较低，但是你要知道是怎么回事