关于前端:VUE-巧用attrs和inheritAttrs提高组件的可扩展性

在平时创立组件时，个别应用的是利用 props 传值，而后通过传入的值再赋给标签的形式，来管制组件里的，这种办法在应用时的可扩展性不大，很难通过内部来动静的往组件外部增加或者批改标签属性。

这个时候，就能够应用 $attrs 和inheritAttrs来减少组件的可扩展性

上面以本人封装的 myInput 组件来举例

这里应用 div 包裹是为了外面能够增加更多的内容

<div>
    <input  v-bind="$attrs">
</div>

当须要在一个登录页面上，应用这个 myInput 组件，一个输出文字，一个输出明码，这个时候，就想在内部间接设置 type 来管制 myInput 组件中的 input 标签。

<myInput type="text"></myInput>

然而如果咱们间接在 myInput 组件上间接写 type 属性时，就会发现，type属性间接被传到了 myInput 组件的根元素 div 上，并不会设置到 input 的标签之上。

// 运行后果
<div type="text" placeholder="请输出用户名">
  <input type="text">
</div>

在这个时候，就须要设置一个非凡的属性 inheritAttrs=false(官网定义入口), 这个属性的设置作用是 禁止传入的属性增加到组件的根元素上。

那禁止传入的值增加到根元素后，那就须要将传入的值给到 input 的标签上，这时就能够通过给 input 的标签上设置一个 v-bind=$attrs, 来将传入的值增加到input 的标签中。这个 $attrs(官网定义入口) 在传入的组件的属性中，除了 props 中定义了的属性外，其余的全副蕴含

<template>
  <div>
    <input type="text">
  </div>
</template>

<script>
export default {inheritAttrs: true,}
</script>

通过设置这两个属性，就实现了配置 input 的标签的性能。

关于前端:VUE-巧用attrs和inheritAttrs提高组件的可扩展性

VUE 巧用 $attrs 和 inheritAttrs 进步组件的可扩展性

前言

步骤