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