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

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的标签的性能。

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理