$attrs -- 让你的组件更加灵活配置 (vue 高阶组件）

vue 官方文档 vm.$attrs

• 类型：{ [key: string]: string }

• 只读

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

实际使用

假设我们有这样一个自定义输入框组件，如果需要绑定不同的原生属性，那么就可以使用 $attrs。

  // 父组件
 <div id="app">
    <MyInput type="text" placeholder="please input username" />
    <MyInput type="password" placeholder="please input password" />
  </div>
  

 // 子组件
<template>
  <div class="input-wrapper">
    <input />
  </div>
</template>

在开发工具可以看到属性被绑定到子组件根元素上，密码明文显示，若我们想把属性绑定到子组件 <input>标签上怎么办呢？

使用 $attrs

 // 子组件通过 v-bind="$attrs" 传入父组件属性
<template>
  <div class="input-wrapper">
    <input v-bind="$attrs" />
  </div>
</template>

<script>
export default {
  // 属性不绑定到根元素上
  inheritAttrs: false,
};
</script>

这个时候我们的密码就是暗文了。

属性也被绑定到 子组件<input> 标签上了