名詞解釋:
$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>