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ì)覆蓋掉在組件中相同未定義屬性名稱的值，結(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ì)覆蓋掉在組件中相同未定義屬性名稱的值，結(jié)果如下
當(dāng)模板里綁定v-bind="$attrs"時(shí)，inheritAttrs為false時(shí)，自定義屬性可以插入到我們的組件中，但不會(huì)覆蓋掉在組件中相同未定義屬性名稱的值，結(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)文章
使用Element進(jìn)行前端開發(fā)的詳細(xì)圖文教程
vue使用axios獲取不到響應(yīng)頭Content-Disposition的問題及解決
一文學(xué)會(huì)什么是vue.nextTick()
關(guān)于Element-ui中table默認(rèn)選中toggleRowSelection問題
Vue.js中的計(jì)算屬性、監(jiān)視屬性與生命周期詳解