Vue3-笔记十.5(透传Attributes)（vue组件穿透什么意思）

指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器

就像之前说的组件上的style class，

<!-- <MyButton> 的模板 -->
<button>click me</button>

//父组件使用了，并传递了class
<MyButton class="large" v-on=''onclick" />

这是渲染的结果，单根节点

<button class="large" v-on=''onclick">click me</button>

深层组件继承

<!-- <MyButton/> 的模板，只是渲染另一个组件 -->
<BaseButton />

透传的 attribute 不会包含 <MyButton> 上声明过的 props 或是针对 emits 声明事件的 v-on 侦听函数

禁用attribute继承

从v3,3开始，在setup语法糖中这样使用

<script setup>
defineOptions({
  inheritAttrs: false
})
</script>

我们想要所有像 class 和 v-on 监听器这样的透传 attribute 都应用在内部的 <button> 上而不是外层的 <div> 上。我们可以通过设定 inheritAttrs: false 和使用 v-bind="$attrs" 来实现：

<div class="btn-wrapper">
  <button class="btn" v-bind="$attrs">click me</button>
</div>
<script setup>
defineOptions({
  inheritAttrs: false
})
</script>

多根节点的继承

<CustomLayout id="custom-layout" @click="changeValue" />

//由于 Vue 不知道要将 attribute 透传到哪里，所以会抛出一个警告。
<header>...</header>
<main>...</main>
<footer>...</footer>

<header>...</header>
<main v-bind="$attrs">...</main>
<footer>...</footer>

在JavaScript中访问透传Attributes

//Vue3中提供了useAttrsAPI来供我们使用
<script setup>
//如果跟前文的插件装了，可以省略引入
import { useAttrs } from 'vue'   
const attrs = useAttrs()
</script>