共计 843 个字符,预计需要花费 3 分钟才能阅读完成。
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
的标签的性能。
正文完