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

    互联网/前端 137次点击 · 1232天前 · 涛声依旧
WPS表格技巧—如何快速输入特殊符号?Excel 表格中输入 0 不显示怎么办? 涛声依旧

1条回答我要回复

    岁月静好1232天前

      如题,可以通过 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 绑定并不是可响应的,这一点需要额外注意一下。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的



       

    请先登录后,再回复