在vue中使用inheritAttrs實現(xiàn)組件的擴展性介紹
1、首先我們創(chuàng)建一個input組件
<template>
<div class="inputCom-wrap">
<input v-bind="$attrs" />
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
inheritAttrs:false,//不希望根直接繼承特性，而是使用$attrs自定義繼承，當前組件的根就是inputCom-wrap
setup () {
return {}
}
})
</script>
<style scoped>
</style>
2、使用組件的時候，隨便增加一些屬性，如
<inputCom type="text" class="input-a"></inputCom>
<inputCom type="password" class="input-b"></inputCom>
3、查看最終的渲染結果為(與props不會沖突)
補充知識：vue組件深層傳值inheritAttrs、$attrs、$listeners
1、$attrs
組件深層傳值 可通過父組件綁定 v-bind="$attrs"傳給子組件
一般子組件this.$attrs可以拿到父組件的所有傳輸?shù)膶傩浴?/p>
當子組件props注冊了聲明某屬性之后，this.$attrs將不包含該屬性；
同理通過v-bind="$attrs"綁定孫子組件也不會包含子組件props聲明的屬性。
props: {
data:{
type: Array,
default: () => [],//數(shù)組格式[{label:xx,value:xxx}]
},
value: {
type: Array,
default: () => [],//數(shù)組格式[xx,xx,xx]
},
maxHeight:{
type:[String,Number],
default:350,
}
},
mounted() {
console.log("來自多選",this.$attrs)
},
2、inheritAttrs
默認值為true
默認情況子組件props未聲明，父組件傳輸?shù)钠渌麑傩詴徽J作 props 的 attribute 綁定 (attribute bindings) 將會“回退”且作為普通的 HTML attribute 應用在子組件的根元素上（有可能會覆蓋子組件根元素上的某些屬性列如 type="text"之類屬性）
子組件的inheritAttrs 設置為false可以避免
3、$listeners
父組件-子組件-孫子組件，現(xiàn)在我要你在孫子組件里改變父組件的值，子組件直接綁定
<muti-select v-bind="$attrs" v-on="$listeners" class="select"></muti-select>
以上這篇在vue中使用inheritAttrs實現(xiàn)組件的擴展性介紹就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Element-UI+Vue模式使用總結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
Vue中.env、.env.development及.env.production文件說明
這篇文章主要給大家介紹了關于Vue中.env、.env.development及.env.production文件說明的相關資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了Vue-less的使用和deep深度選擇器,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了加快Vue項目的開發(fā)速度的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
使用vue實現(xiàn)滑動滾動條來加載數(shù)據(jù)
在vuejs中,我們經(jīng)常使用axios來請求數(shù)據(jù),但是有時候,我們請求的數(shù)據(jù)量很大,那么我們?nèi)绾螌崿F(xiàn)滑動滾動條來加載數(shù)據(jù)呢,接下來小編就給大家介紹一下在vuejs中如何實現(xiàn)滑動滾動條來動態(tài)加載數(shù)據(jù),需要的朋友可以參考下2023-10-10
vue-element如何實現(xiàn)動態(tài)換膚存儲
這篇文章主要介紹了vue-element如何實現(xiàn)動態(tài)換膚存儲問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了Vue+Element自定義縱向表格表頭教程，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
本篇文章給大家分享了vue v-model動態(tài)生成的相關知識點以及實例代碼，有興趣的朋友參考學習下。2018-06-06
這篇文章主要介紹了Vue3如何獲取來源路由問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
vue select選擇框數(shù)據(jù)變化監(jiān)聽方法
今天小編就為大家分享一篇vue select選擇框數(shù)據(jù)變化監(jiān)聽方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08