-
分析
- API考察，但$attrs和$listeners是比较少用的边界知识，而且vue3有变化，$listeners已经移除，还是有细节可说的；
-
思路
- 1.这两个api的作用；
- 2.使用场景分析；
- 3.使用方式和细节；
- 4.vue3变化；
-
范例
- 1.我们可能会有一些属性和事件没有在props中定义，这类称为非属性特性，结合
v-bind指令可以直接透传给内部的子组件； - 2.这类“属性透传”常常用于包装高阶组件时往内部传递属性，常用于爷孙组件之间传参。比如我在扩展A组件时创建了组件B，然后在组件C中使用B，此时C组件传递的属性中只有props里面声明的属性是给B使用的，其他的都是A需要的，此时就可以利用
v-bind="$attrs"透传下去； - 3.最常见用法是结合v-bind做展开；
$attrs本身不是响应式的，除非访问的属性本身是响应式对象； - 4.vue2中使用$listeners传递事件，vue3中已移除，均合并到
$attrs中，使用起来更简单了；
- 1.我们可能会有一些属性和事件没有在props中定义，这类称为非属性特性，结合
-
原理
- 查看透传属性foo和普通属性bar，发现vnode结构完全相同，这说明Vue3中将分辨两者的工作由框架完成，而非用户指定：
<template>
<h1>{{msg}}</h1>
<comp foo="foo" bar="bar"></comp>
</template>
<template>
<div>
{{$attrs.foo}} {{bar}}
</div>
</template>
<script setup>
defineProps({
bar: String
})
</script>
_createVNODE(Comp,{
foo:"foo",
bar:"bar"
})