Vue中inheritAttrs的使用實(shí)例詳解
今天舉一個(gè)例子解釋一下inheritAttrs的使用
先看代碼
<body>
<div id="app" class="vueclass">
<my-com title="標(biāo)題" wx-attr1="未定義屬性1" wx-attr2="未定義屬性2"></my-com>
</div>
<script type="text/javascript">
Vue.component("my-com",{
props:{
title:String,
},
inheritAttrs:false,
template:`
<div wx-attr1="hello" >
<h1>{{title}}</h1>
</div>
`,
})
const App = new Vue({
el:"#app",
data:{
},
methods:{
}
})
</script>
</body>
當(dāng)inheritAttrs的值為false時(shí)，自定義屬性是插入不到我們的組件中的，結(jié)果如下
當(dāng)inheritAttrs的值為true時(shí)，自定義屬性可以插入到我們的組件中，并且會(huì)覆蓋掉在組件中相同未定義屬性名稱(chēng)的值，結(jié)果如下
但在組件中定義的class屬性和style屬性，使用inheritAttrs屬性并不能阻礙class屬性和style屬性傳到模板中，如果模板中也存在class屬性和style屬性，這樣屬性會(huì)疊加到一起
結(jié)果如下
還有一種情況，先看代碼
<body>
<div id="app" class="vueclass">
<my-com title="標(biāo)題" wx-attr1="未定義屬性1" wx-attr2="未定義屬性2" class="wxClass" style="color:red"></my-com>
</div>
<script type="text/javascript">
Vue.component("my-com",{
props:{
title:String,
},
inheritAttrs:,
template:`
<div wx-attr1="hello" class="div1" style="width:500px" v-bind="$attrs">
<h1>{{title}}</h1>
</div>
`,
})
const App = new Vue({
el:"#app",
data:{
},
methods:{
}
})
</script>
</body>
當(dāng)模板里綁定v-bind="$attrs"時(shí)，inheritAttrs為true時(shí)，自定義屬性可以插入到我們的組件中，并且會(huì)覆蓋掉在組件中相同未定義屬性名稱(chēng)的值，結(jié)果如下
當(dāng)模板里綁定v-bind="$attrs"時(shí)，inheritAttrs為false時(shí)，自定義屬性可以插入到我們的組件中，但不會(huì)覆蓋掉在組件中相同未定義屬性名稱(chēng)的值，結(jié)果如下
當(dāng)模板里綁定v-bind="$attrs"時(shí)，并不會(huì)影響class屬性與style屬性，組件里的值依然會(huì)疊加到模板里
到此這篇關(guān)于Vue中inheritAttrs的使用的文章就介紹到這了,更多相關(guān)Vue inheritAttrs使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
typescript不僅可以約束我們的編碼習(xí)慣，還能起到注釋的作用，當(dāng)我們看到一函數(shù)后我們立馬就能知道這個(gè)函數(shù)的用法。這篇文章主要介紹了在Vue組件中使用 TypeScript的方法,需要的朋友可以參考下2018-02-02
vite獲取所有環(huán)境變量(env)的實(shí)現(xiàn)方法
本文主要介紹了vite獲取所有環(huán)境變量(env)的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-06-06
最近工作中遇到個(gè)需求,需要實(shí)現(xiàn)個(gè)可視化圖表頁(yè)的PDF文件導(dǎo)出,所以下面這篇文章主要給大家介紹了關(guān)于利用vue如何將html頁(yè)面生成高清晰pdf文件的相關(guān)資料,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了Vue如何使用CSS自定義變量，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-05-05
Vue3使用pinia進(jìn)行數(shù)據(jù)添加、修改和刪除的操作代碼
Pinia?是?Vue?3?的官方狀態(tài)管理庫(kù),旨在提供一種簡(jiǎn)單、靈活且類(lèi)型安全的狀態(tài)管理解決方案,Pinia?的設(shè)計(jì)理念與?Vuex?類(lèi)似,但更加輕量且易于使用,文旨在全面解析?Vue?3?中如何使用?Pinia?進(jìn)行數(shù)據(jù)的添加、修改和刪除,需要的朋友可以參考下2025-03-03
本文主要介紹了vue3.x頁(yè)面功能拆分方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
vue中$emit傳遞多個(gè)參(arguments和$event)
本文主要介紹了vue中$emit傳遞多個(gè)參(arguments和$event)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
解決antd 表單設(shè)置默認(rèn)值initialValue后驗(yàn)證失效的問(wèn)題
這篇文章主要介紹了解決antd 表單設(shè)置默認(rèn)值initialValue后驗(yàn)證失效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
在Vue3中可以使用ref函數(shù)來(lái)創(chuàng)建一個(gè)響應(yīng)式的變量,通過(guò)將ref函數(shù)應(yīng)用于一個(gè)組件實(shí)例,我們可以獲取到該組件的實(shí)例對(duì)象,這篇文章主要給大家介紹了關(guān)于vue3?ref獲取組件實(shí)例的詳細(xì)圖文教程,需要的朋友可以參考下2023-10-10
vue history 模式打包部署在域名的二級(jí)目錄的配置指南
這篇文章主要介紹了vue history 模式打包部署在域名的二級(jí)目錄的配置指南 ，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07