VUE 巧用$attrs和inheritAttrs提高組件的可擴(kuò)展性
前言
在平時(shí)創(chuàng)建組件時(shí)，一般使用的是利用props傳值，然后通過傳入的值再賦給標(biāo)簽的方式烹笔，來控制組件里的歹颓，這種方法在使用時(shí)的可擴(kuò)展性不大，很難通過外部來動(dòng)態(tài)的往組件內(nèi)部添加或者修改標(biāo)簽屬性淹真。
這個(gè)時(shí)候，就可以使用$attrs和inheritAttrs來增加組件的可擴(kuò)展性
步驟
下面以自己封裝的myInput組件來舉例
這里使用div包裹是為了里面可以添加更多的內(nèi)容
<div>
<input v-bind="$attrs">
</div>
當(dāng)需要在一個(gè)登錄頁面上连茧，使用這個(gè)myInput組件核蘸，一個(gè)輸入文字，一個(gè)輸入密碼啸驯，這個(gè)時(shí)候客扎，就想在外部直接設(shè)置type來控制myInput組件中的input標(biāo)簽。
<myInput type="text"></myInput>
但是如果我們直接在myInput組件上直接寫type屬性時(shí)罚斗，就會(huì)發(fā)現(xiàn)徙鱼，type屬性直接被傳到了myInput組件的根元素div上，并不會(huì)設(shè)置到input的標(biāo)簽之上针姿。
//運(yùn)行結(jié)果
<div type="text" placeholder="請(qǐng)輸入用戶名">
<input type="text">
</div>
在這個(gè)時(shí)候袱吆，就需要設(shè)置一個(gè)特殊的屬性inheritAttrs=false(官方定義入口),這個(gè)屬性的設(shè)置作用是禁止傳入的屬性添加到組件的根元素上。
那禁止傳入的值添加到根元素后距淫，那就需要將傳入的值給到input的標(biāo)簽上绞绒，這時(shí)就可以通過給input的標(biāo)簽上設(shè)置一個(gè)v-bind=$attrs,來將傳入的值添加到input的標(biāo)簽中。這個(gè)$attrs(官方定義入口)在傳入的組件的屬性中榕暇，除了props中定義了的屬性外蓬衡，其他的全部包含
<template>
<div>
<input type="text">
</div>
</template>
<script>
export default {
inheritAttrs: true,
}
</script>
通過設(shè)置這兩個(gè)屬性，就實(shí)現(xiàn)了配置input的標(biāo)簽的功能彤枢。
