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

1,821 阅读1分钟

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

前言

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

这个时候,就可以使用$attrsinheritAttrs来增加组件的可扩展性

步骤

下面以自己封装的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的标签的功能。

\