VUE 巧用$attrs和inheritAttrs提高组件的可扩展性

VUE 巧用$attrs和inheritAttrs提高组件的可扩展性

前言

在平时创建组件时，一般使用的是利用props传值，然后通过传入的值再赋给标签的方式，来控制组件里的，这种方法在使用时的可扩展性不大，很难通过外部来动态的往组件内部添加或者修改标签属性。

这个时候，就可以使用$attrs和inheritAttrs来增加组件的可扩展性

步骤

下面以自己封装的myInput组件来举例

这里使用div包裹是为了里面可以添加更多的内容

当需要在一个登录页面上，使用这个myInput组件，一个输入文字，一个输入密码，这个时候，就想在外部直接设置type来控制myInput组件中的input标签。

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

//运行结果

  

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

那禁止传入的值添加到根元素后，那就需要将传入的值给到input的标签上，这时就可以通过给input的标签上设置一个v-bind=$attrs,来将传入的值添加到input的标签中。这个$attrs(官方定义入口)在传入的组件的属性中，除了props中定义了的属性外，其他的全部包含

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