vue属性透传

发布网友发布时间：2022-12-28 17:32

共1个回答

热心网友时间：2023-01-23 17:11

通过 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>