在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、查看最終的渲染結(jié)果為(與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 應(yīng)用在子組件的根元素上（有可能會覆蓋子組件根元素上的某些屬性列如 type="text"之類屬性）
子組件的inheritAttrs 設(shè)置為false可以避免
3、$listeners
父組件-子組件-孫子組件，現(xiàn)在我要你在孫子組件里改變父組件的值，子組件直接綁定
<muti-select v-bind="$attrs" v-on="$listeners" class="select"></muti-select>
以上這篇在vue中使用inheritAttrs實現(xiàn)組件的擴展性介紹就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue.js的vue-cli腳手架中使用百度地圖API的實例
今天小編就為大家分享一篇關(guān)于vue.js的vue-cli腳手架中使用百度地圖API的實例，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
vue+elementui實現(xiàn)動態(tài)添加行/可編輯的table
這篇文章主要為大家詳細介紹了vue+elementui實現(xiàn)動態(tài)添加行/可編輯的table，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了Vue3基于rem比例縮放方案,本縮放方案置于hooks中即可，文中通過示例代碼介紹了vue-cli3 中使用rem布局的方法，需要的朋友可以參考下2023-05-05
axios全局請求參數(shù)設(shè)置,請求及返回攔截器的方法
下面小編就為大家分享一篇axios全局請求參數(shù)設(shè)置,請求及返回攔截器的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
VUE使用docxtemplater導出word文檔實例(帶圖片)
docxtemplate支持的功能很多,語法包含變量替換、條件判斷、循環(huán)、列表循環(huán)、表格循環(huán)等,下面這篇文章主要給大家介紹了關(guān)于VUE使用docxtemplater導出word功能(帶圖片)的相關(guān)資料,需要的朋友可以參考下2023-06-06
隨著vue2的落幕,vue3越來成熟,有必要更新一下vue3的父子組件之間的傳值方式,這里介紹下vue3+vite+ts父子組件之間的傳值方式實例詳解,感興趣的朋友一起看看吧2023-12-12
本篇文章主要介紹了vuex2.0 之 modules,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
Vue 使用beforeEach實現(xiàn)登錄狀態(tài)檢查功能
今天小編就為大家分享一篇Vue 使用beforeEach實現(xiàn)登錄狀態(tài)檢查功能，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
Vue中使用jsencrypt進行RSA非對稱加密的操作方法
這篇文章主要介紹了Vue中使用jsencrypt進行RSA非對稱加密，在這里需要注意要加密的數(shù)據(jù)必須是字符串，對Vue?RSA非對稱加密相關(guān)知識感興趣的朋友一起看看吧2022-04-04
這篇文章主要為大家詳細介紹了Vue實現(xiàn)圖書管理小案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12