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>
總結
以上是生活随笔為你收集整理的Vue 中 $attrs 的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 阿里深度学习框架开源了！无缝对接Tens
- 下一篇： 日累计限额是什么意思