溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了inheritAttrs如何在Vue中使用，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
先看代碼
<body>
<div id="app" class="vueclass">
<my-com title="標題" 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" >
<h2>{{title}}</h2>
</div>
`,
})
const App = new Vue({
el:"#app",
data:{
},
methods:{
}
})
</script>
</body>當inheritAttrs的值為false時，自定義屬性是插入不到我們的組件中的，結果如下
當inheritAttrs的值為true時，自定義屬性可以插入到我們的組件中，并且會覆蓋掉在組件中相同未定義屬性名稱的值，結果如下
但在組件中定義的class屬性和style屬性，使用inheritAttrs屬性并不能阻礙class屬性和style屬性傳到模板中，如果模板中也存在class屬性和style屬性，這樣屬性會疊加到一起
結果如下
還有一種情況，先看代碼
<body>
<div id="app" class="vueclass">
<my-com title="標題" wx-attr1="未定義屬性1" wx-attr2="未定義屬性2" class="wxClass" ></my-com>
</div>
<script type="text/javascript">
Vue.component("my-com",{
props:{
title:String,
},
inheritAttrs:,
template:`
<div wx-attr1="hello" class="div1" v-bind="$attrs">
<h2>{{title}}</h2>
</div>
`,
})
const App = new Vue({
el:"#app",
data:{
},
methods:{
}
})
</script>
</body>當模板里綁定v-bind="$attrs"時，inheritAttrs為true時，自定義屬性可以插入到我們的組件中，并且會覆蓋掉在組件中相同未定義屬性名稱的值，結果如下
當模板里綁定v-bind="$attrs"時，inheritAttrs為false時，自定義屬性可以插入到我們的組件中，但不會覆蓋掉在組件中相同未定義屬性名稱的值，結果如下
當模板里綁定v-bind="$attrs"時，并不會影響class屬性與style屬性，組件里的值依然會疊加到模板里
上述內容就是inheritAttrs如何在Vue中使用，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業(yè)資訊頻道。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內容。
