Vue3 属性透传 $attrs 与 插槽透传 $slots

Posted 2023-03-17

参考技术A vue $slots 传送门

vue $attrs 传送门

$attrs 一个包含了组件所有透传 attribute 的对象（不包含已定义的 props ）。

透传 Attribute 是一些由父组件传入的 attribute 和 事件处理器 ，且没有在此子组件中声明为一个 prop 或 要抛出的事件 。

默认情况下，若是单一根节点组件， $attrs 中的所有 property 都是直接自动继承自组件的根元素。而多根节点组件则不会如此，同时你也可以通过配置 inheritAttrs 选项来显式地关闭该行为。

$slots 一个表示父组件所传入 插槽 的对象。

通常用于手写 渲染函数 ，但也可用于检测是否存在插槽。

每一个插槽都在 this.$slots 上暴露为一个函数，返回一个 vnode 数组，同时 key 名对应着插槽名。默认插槽暴露为 this.$slots.default 。

如果插槽是一个 作用域插槽 ，传递给该插槽函数的参数可以作为插槽的 prop 提供给插槽。