vue3中的 $attrs 与 Attributes 继承

vue3中的 $attrs 与 Attributes 继承

官方文档：https://cn.vuejs.org/guide/components/attrs.html#attribute-inheritance

首先介绍一下什么是 Attributes 继承，即属性继承！

当一个父组件给子组件绑定属性时（props属性、class属性、自定义事件、style属性等等）

// 父组件
<Demo
    @click="fn1"
    @getname="fn2"
    numm="111"
    :name="slotName"
    class="abc"
>
</Demo>

子组件的根元素（即最外层的元素）会自动继承除去 props、emits 之外的属性

而这些属性都被封装到了 $attrs 对象上

// demo.vue
<template>
    <div>
        {{ $attrs }}
    </div>
</template>

<script setup>
import { ref, useAttrs } from 'vue'

const props = defineProps({
    name: String
})

let attrs = useAttrs()
console.log(attrs)
</script>

attrs = Proxy {numm: ‘111’, class: ‘abc’, __vInternal: 1, onClick: ƒ, onGetname: ƒ}

$attrs：

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

禁用 Attributes 继承：取消根节点自动继承

// 需要额外加上一个配置
<script>
export default {
    inheritAttrs: false,
}
</script>

<script setup>
import { ref, useAttrs } from 'vue'

const props = defineProps({
    name: String
})
 ref(12)
let attrs = useAttrs()
console.log(attrs)
</script>

v-bind=$attrs

实现孙组件的 Attribute 继承

我们想要所有的透传 attribute 都应用在内部的元素中， 而不是外层的根节点上。我们可以通过设定 inheritAttrs: false 和使用 v-bind="$attrs" 来实现

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

没有参数的 v-bind 会将 $attrs 的所有属性都作为 attribute 应用到目标元素上