Vue 中 $attrs 的使用

名詞解釋:

$attrs--繼承所有的父組件屬性(除了prop傳遞的屬性、class 和 style )

inheritAttrs:默認值true,繼承所有的父組件屬性(除props的特定綁定)作爲普通的HTML特性應用在子組件的根元素上,如果你不希望組件的根元素繼承特性設置inheritAttrs: false,但是class屬性會繼承

主要用途

用在父組件傳遞數據給子組件或者孫組件

<body>

<div id="app" class="demo">
<base-input label="姓名" class="username-input" placeholder="Enter your username" data-date-picker="activated"></base-input>
</div>
<script src="js/vue-2.5.13.js"></script>
<script>
Vue.component("base-input", {
inheritAttrs: false, //此處設置禁用繼承特性
props: ["label"],
template:
'<label>' //這裏的label元素 因爲inheritAttrs: false,所以無法從<base-input>元素中繼承placeholder, data-date-picker屬性,但是class屬性會繼承
+' {{label}}'
+' {{$attrs.placeholder}}'
+' {{$attrs["data-date-picker"]}}'
+' <input v-bind="$attrs"/>'  //<base-input>元素中,除了class,label(proprs中已經有了)外,剩下placeholder  和 data-date-picker的屬性以及屬性值全部繼承過來了
+' </label>'
,
mounted: function() {
console.log(this.$attrs);
}
})
const app = new Vue({
el: '#app',
data: {

}

});

</script>

</body>

 

渲染出來的結果:

<label class="username-input">
姓名
Enter your username
activated
<input placeholder="Enter your username" data-date-picker="activated">
</label>

 

如果把上面例子中的inheritAttrs: false去掉或者改爲inheritAttrs: true,最終渲染爲:

<label placeholder="Enter your username" data-date-picker="activated" class="username-input">
姓名
Enter your username
activated
<input placeholder="Enter your username" data-date-picker="activated">
</label>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章