Vue中inheritAttrs的使用實(shí)例詳解
今天舉一個(gè)例子解釋一下inheritAttrs的使用
先看代碼
<body><div class='vueclass'><my-com 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 class='vueclass'><my-com wx-attr1='未定義屬性1' wx-attr2='未定義屬性2' style='color:red'></my-com></div><script type='text/javascript'>Vue.component('my-com',{props:{title:String,},inheritAttrs:,template:`<div wx-attr1='hello' 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)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. python web框架的總結(jié)2. Python如何進(jìn)行時(shí)間處理3. 詳解Python模塊化編程與裝飾器4. python使用ctypes庫(kù)調(diào)用DLL動(dòng)態(tài)鏈接庫(kù)5. html小技巧之td,div標(biāo)簽里內(nèi)容不換行6. 以PHP代碼為實(shí)例詳解RabbitMQ消息隊(duì)列中間件的6種模式7. python logging 重復(fù)寫(xiě)日志問(wèn)題解決辦法詳解8. Python中l(wèi)ogger日志模塊詳解9. python裝飾器三種裝飾模式的簡(jiǎn)單分析10. Python實(shí)現(xiàn)迪杰斯特拉算法過(guò)程解析
網(wǎng)公網(wǎng)安備