vue3+ts深入组件（三）透传Attributes

一、含义

本节内容作为父子组件传参的补充内容
掌握程度 ：了解

透传Attributes ，一般用来在父子组件中传递属性例如，class，style，id…
且该值不会被组件当作prop或者emits。透传Attributes,也可以用来传递v-on事件监听器
透传的参数一般会直接传递给子组件的根元素（例外情况下文讲解）

例如：

1.父组件中使用，并传入一个class
<Cpn class="parent"/>

渲染后的DOM元素=>
2.子组件只有一个根元素button中
<div class="parent"></div>
 
 即子组件中只有一个根元素时，直接将class传入唯一的根元素中

如果根元素本来就存在class，将会 合并 ！！
class=“parent children”

二、v-on事件监听器继承及深层组件透传

1.v-on事件监听器继承

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

<Cpn @click="parentClick" />
渲染后的DOM元素=>
<button @click="parentClick"  @click="childClick"></button>
此时点击该按钮，将触发两个事件监听器即这个监听器和从父组件继承的监听器都会被触发。

2.深层组件透传

当子组件的根元素是另一个 组件，则会直接将父组件透传的Attributes直接传递给“孙子”组件
特别的，当透传的Attributes也符合Props声明，也可以通过Props传递给"孙子"组件

父组件
<Cpn class="parent"/>

子组件
<Base />
"孙子"组件
<div class="parent">

三、如何禁用attributes继承

使用 inheritAttrs: false来将透传attributes继承禁用
在<scipt setup>语法糖模式下
需要单独写一个scipt块

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

<script setup>
</script>

父组件透传Attributes后这些透传进来的 attribute 可以在模板的表达式中直接用 $attrs 访问到。这个$attrs 对象包含了除组件所声明的 props 和 emits 之外的所有其他 attribute
例如 class，style，@ 监听器等等。和单根节点组件有所不同，有着多个根节点的组件没有自动 attribute 透传行为。需要将 $attrs 显式绑定，否则将会抛出一个运行时警告。

<span> attribute: {{ $attrs }}</span>

这个 $attrs 对象包含了除组件所声明的 props 和 emits 之外的所有其他 attribute，例如 class，style，v-on 监听器等等。

需要访问attribute时， 需要通过 $attrs[‘attribute’] 来访问。

像 @click 这样的一个 v-on 事件监听器将在此对象下被暴露为一个函数 $attrs.onClick。

有时候我们可能为了样式，需要在根元素元素外包装一层
我们可以通过设定 inheritAttrs: false 和使用 v-bind=“$attrs” 来实现：

<div class="contentr">
  <button class="btn" v-bind="$attrs">click me</button>
</div>

四、多个根节点的透传Attributes

父组件中
<Cpn  class="Content">

子组件中
<header>...</header>
<main v-bind="$attrs">...</main>
<footer>...</footer>

文末
感谢阅读，还望支持！欢迎学习交流，如有错误，还请指正！
已更新于2022/11/26