在vue中使用inheritAttrs實(shí)現(xiàn)組件的擴(kuò)展性介紹
1、首先我們創(chuàng)建一個(gè)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自定義繼承，當(dāng)前組件的根就是inputCom-wrap
setup () {
return {}
}
})
</script>
<style scoped>
</style>
2、使用組件的時(shí)候，隨便增加一些屬性，如
<inputCom type="text" class="input-a"></inputCom>
<inputCom type="password" class="input-b"></inputCom>
3、查看最終的渲染結(jié)果為(與props不會(huì)沖突)
補(bǔ)充知識(shí)：vue組件深層傳值inheritAttrs、$attrs、$listeners
1、$attrs
組件深層傳值 可通過(guò)父組件綁定 v-bind="$attrs"傳給子組件
一般子組件this.$attrs可以拿到父組件的所有傳輸?shù)膶傩浴?/p>
當(dāng)子組件props注冊(cè)了聲明某屬性之后，this.$attrs將不包含該屬性；
同理通過(guò)v-bind="$attrs"綁定孫子組件也不會(huì)包含子組件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("來(lái)自多選",this.$attrs)
},
2、inheritAttrs
默認(rèn)值為true
默認(rèn)情況子組件props未聲明，父組件傳輸?shù)钠渌麑傩詴?huì)被認(rèn)作 props 的 attribute 綁定 (attribute bindings) 將會(huì)“回退”且作為普通的 HTML attribute 應(yīng)用在子組件的根元素上（有可能會(huì)覆蓋子組件根元素上的某些屬性列如 type="text"之類(lèi)屬性）
子組件的inheritAttrs 設(shè)置為false可以避免
3、$listeners
父組件-子組件-孫子組件，現(xiàn)在我要你在孫子組件里改變父組件的值，子組件直接綁定
<muti-select v-bind="$attrs" v-on="$listeners" class="select"></muti-select>
以上這篇在vue中使用inheritAttrs實(shí)現(xiàn)組件的擴(kuò)展性介紹就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue.js的vue-cli腳手架中使用百度地圖API的實(shí)例
今天小編就為大家分享一篇關(guān)于vue.js的vue-cli腳手架中使用百度地圖API的實(shí)例，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
vue+elementui實(shí)現(xiàn)動(dòng)態(tài)添加行/可編輯的table
這篇文章主要為大家詳細(xì)介紹了vue+elementui實(shí)現(xiàn)動(dòng)態(tài)添加行/可編輯的table，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了Vue3基于rem比例縮放方案,本縮放方案置于hooks中即可，文中通過(guò)示例代碼介紹了vue-cli3 中使用rem布局的方法，需要的朋友可以參考下2023-05-05
axios全局請(qǐng)求參數(shù)設(shè)置,請(qǐng)求及返回?cái)r截器的方法
下面小編就為大家分享一篇axios全局請(qǐng)求參數(shù)設(shè)置,請(qǐng)求及返回?cái)r截器的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
VUE使用docxtemplater導(dǎo)出word文檔實(shí)例(帶圖片)
docxtemplate支持的功能很多,語(yǔ)法包含變量替換、條件判斷、循環(huán)、列表循環(huán)、表格循環(huán)等,下面這篇文章主要給大家介紹了關(guān)于VUE使用docxtemplater導(dǎo)出word功能(帶圖片)的相關(guān)資料,需要的朋友可以參考下2023-06-06
隨著vue2的落幕,vue3越來(lái)成熟,有必要更新一下vue3的父子組件之間的傳值方式,這里介紹下vue3+vite+ts父子組件之間的傳值方式實(shí)例詳解,感興趣的朋友一起看看吧2023-12-12
本篇文章主要介紹了vuex2.0 之 modules,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
Vue 使用beforeEach實(shí)現(xiàn)登錄狀態(tài)檢查功能
今天小編就為大家分享一篇Vue 使用beforeEach實(shí)現(xiàn)登錄狀態(tài)檢查功能，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
Vue中使用jsencrypt進(jìn)行RSA非對(duì)稱(chēng)加密的操作方法
這篇文章主要介紹了Vue中使用jsencrypt進(jìn)行RSA非對(duì)稱(chēng)加密，在這里需要注意要加密的數(shù)據(jù)必須是字符串，對(duì)Vue?RSA非對(duì)稱(chēng)加密相關(guān)知識(shí)感興趣的朋友一起看看吧2022-04-04
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)圖書(shū)管理小案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12