vue如何更优雅的实现属性透传？

1条回答我要回复

岁月静好1176天前

如题，可以通过 v-bind="$props" 以及v-bind="$attrs"来实现。
比如 A 的子组件是 B，B 的子组件是 C。这个时候如果 A 传递 props 给 B，B 又得传递 props 给 C
<template>
<child-component v-bind="$props"/>
</template>
这里我们利用 v-bind 可以传入一个对象的所有 property，类似 v-bind="Obj"。例如，对于一个给定的对象 postpost: {
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>




有同学可能想到了 provide 和 inject，确实也是可以的传递 props，却做不到属性透传，而且 provide 和 inject 绑定并不是可响应的，这一点需要额外注意一下。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的