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ì)覆蓋掉在組件中相同未定義屬性名稱的值，結(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ì)覆蓋掉在組件中相同未定義屬性名稱的值，結(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)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. PHP正則表達(dá)式函數(shù)preg_replace用法實(shí)例分析2. 一個(gè) 2 年 Android 開發(fā)者的 18 條忠告3. vue使用moment如何將時(shí)間戳轉(zhuǎn)為標(biāo)準(zhǔn)日期時(shí)間格式4. js select支持手動(dòng)輸入功能實(shí)現(xiàn)代碼5. Android 實(shí)現(xiàn)徹底退出自己APP 并殺掉所有相關(guān)的進(jìn)程6. Android studio 解決logcat無過濾工具欄的操作7. 什么是Python變量作用域8. vue-drag-chart 拖動(dòng)/縮放圖表組件的實(shí)例代碼9. Spring的異常重試框架Spring Retry簡單配置操作10. Vue實(shí)現(xiàn)仿iPhone懸浮球的示例代碼
網(wǎng)公網(wǎng)安備