vue透传 Attributes

Attributes 继承​

在此之前，先来弥补一个小知识点，vue3支持多个根节点，vue2不支持，

<!--vue2: 错误的写法-->
 <template>
   <div></div>
   <div></div>
 </template>
 <!--vue3: 正确-->
 <template>
   <div></div>
   <div></div>
 </template>

“透传 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的根元素上。

多个根节点

存在多个根节点的时候，并且还传递了透传 attributes，如果没有手动处理的话，是会存在警告的。

那么处理警告的方式两种：
禁用透传 attributes，设置 inheritAttrs 为 false（后面再说）。手动处理，具体绑定在哪一个根节点。

<!--son子组件-->
 <template>
   <div class="own" :class="$attrs['class']">son组件1</div>
   <div class="own">son组件2</div>
 </template>

这样警告也会消失，并且把透传 attributes 绑定在了第一个根节点上。这里的$attrs是一个对象，需要具体指明某个属性。
最后渲染的结果

 <div class="own abc">son组件1</div>
 <div class="own">son组件2</div>

v-on 监听器继承

透传 attributes 之事件绑定 上面只是针对样式进行了透传，那么事件的话，又会是怎么样的呢？
先说结论吧，表现形式跟样式绑定是基本一样的。

<!--子组件Son-->
 <script setup lang="ts">
 const btn1 = () => {
   console.log("子组件的点击事件");
 };
 </script>
 <template>
   <button @click="btn1">点击</button>
 </template>

现在子组件的根节点是一个 button 标签，并且上面绑定了一个点击事件。

<!--父组件使用-->
 <script setup lang="ts">
 import Son from "./Son.vue";
 const btn = () => {
   console.log("父组件的点击事件");
 };
 </script>
 <template>
   <Son @click="btn" />
 </template>

父组件调用，也传递了一个透传的事件过来。当点击按钮：

现，子组件的事件被触发了，父组件传递过来的事件也被触发了，顺序为先子后父。
透传的 attributes 基本说完了，接下来就看看几个特殊部分吧。

禁用透传attributes

设置 inheritAttrs：false，就禁止使用了自动绑定，可以消除前面所说的警告；然后就可以自由的绑定 $attrs, 该对象就包含了传递过来的透传 attributes。

<!--如果是setup写法，就需要单独添加一个script标签，暴露一个配置对象-->
 <script lang="ts">
 export default {
   inheritAttrs: false, // 禁用
 };
 </script>
 <script setup lang="ts">
 const btn1 = () => {
   console.log("子组件的点击事件");
 };
 </script>
 <template>
   <button @click="btn1">点击</button>
 </template>

需要注意的是：
和 props 有所不同，透传 attributes 在 JavaScript 中保留了它们原始的大小写，所以像 foo-bar 这样的一个 attribute 需要通过 $attrs['foo-bar'] 来访问。像 @click 这样的一个 v-on 事件监听器将在此对象下被暴露为一个函数 $attrs.onClick。