vue属性透传

Posted 2023-03-20

参考技术A 通过 v-bind="$props" 以及v-bind="$attrs" 实现属性透传

很多时候，我们会写一些嵌套组件，比如 A 的子组件是 B，B 的子组件是 C。这个时候如果 A 传递 props 给 B，B 又得传递 props 给 C，我们经常在 B 传给 C 的时候这么写

<template>

  <child-component :someprop1="someprop1"

                  :someprop2="someprop2"

                  :someprop3="someprop3"

                  :someprop4="someprop4"

                  ...

  />

</template>

这样是很不优雅的，其实你可以直接使用 v-bind: $props

<template>

  <child-component v-bind="$props"/>

</template>

这里我们利用 v-bind 可以传入一个对象的所有 property，类似 v-bind="Obj"。例如，对于一个给定的对象 post

post:

  id: 1,

  title: 'My Journey with Vue'



下面的模板：

<blog-post v-bind="post"></blog-post>

等价于：

<blog-post

  v-bind:id="post.id"

  v-bind:title="post.title"

></blog-post>

这个配合 v-bind="$attrs" 在封装一些组件的时候非常有用，比如实现属性透传。

vm.$attrs 包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

比如将上面传递进来的 props 全部绑定到 el-input 中,我们可以在子组件中这么写：

<template>

  <div>

    <el-input v-bind="$attrs" ></el-input>

  </div>

</template>

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

参考技术A vue $slots 传送门

vue $attrs 传送门

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

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

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

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

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

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

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