vue实现属性透传 v-bind="$attrs"

949 阅读1分钟

1.官方定义

包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。 我们可以简单理解为调用一个组件的时候传入属性 (class 和 style 除外),而且不在该组件内部的 props 中声明,就可以使用 v-bind="attrs"传入属性

2.应用场景

很多时候,我们需要对UI组件进行二次封装,这里以element ui为例,比如我们要封装一个date组件,在大多数场景下,我们需要设置属性placeholder、clearable等等 ######通过 props 传值进来,当然这样太过繁琐

<template>
<!-- 子组件 -->
  <div>
  <el-date-picker v-model="value" type="date"  :placeholder="placeholder"
      :clearable="clearable">
    </el-date-picker>
  </div>
</template>

**通过 v-bind="$attrs" 进行透传 **

<template>
<!-- 子组件 -->
  <div>
  <el-date-picker v-bind="$attrs"  v-model="value" type="date" >
    </el-date-picker>
  </div>
</template>
<script>
export default {
  name: 'Date'
}
</script>
<!-- 父组件 -->
<Date placeholder="请输入日期"
        :clearable="true"/>