名詞解釋
inheritAttrs：
默認情況下父作用域的不被認作 props 的特性綁定 (attribute bindings) 將會“回退”且作為普通的 HTML 特性應用在子組件的根元素上。當撰寫包裹一個目標元素或另一個組件的組件時，這可能不會總是符合預期行為。通過設置 inheritAttrs 到 false，這些默認行為將會被去掉。而通過 (同樣是 2.4 新增的) 實例屬性 $attrs 可以讓這些特性生效，且可以通過 v-bind 顯性的綁定到非根元素上。
注意：這個選項不影響 class 和 style 綁定。
什么意思呢，就是說在父組件中使用了子組件，在子組件中綁定了一個或多個屬性，就是像<child a="b" :c="d"></child>
注意兩種綁定方式。如果在子組件中沒有申明使用a或者b，那么默認情況下會生成類似<div a="b" c="12"></div>這樣的節點。如果使用了props: ['a']， 那么只有c=“d”會出現在div節點上。
下面有具體的例子。
$attrs:
包含了父作用域中不作為 prop 被識別 (且獲取) 的特性綁定 (class 和 style 除外)。當一個組件沒有聲明任何 prop 時，這里會包含所有父作用域的綁定 (class 和 style 除外)，並且可以通過 v-bind="$attrs" 傳入內部組件——在創建高級別的組件時非常有用。
和上面差不多一個意思。只是class和style不在這個里面。
$listeners:
包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它可以通過 v-on="$listeners" 傳入內部組件——在創建更高層次的組件時非常有用。
主要用途
用在父組件傳遞數據給子組件或者孫組件
例1
<body class="">
<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, //此處設置禁用繼承特性 （只繼承class屬性）
props: ["label"],
template: `
<label>
{{label}}
{{$attrs.placeholder}}
{{$attrs["data-date-picker"]}}
<input v-bind="$attrs"/>
</label>
`,
mounted: function() {
console.log(this.$attrs);
}
})
const app = new Vue({
el: '#app',
data: {
}
});
</script>
</body>
上面的例子渲染后的HTML如下：
<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>
同時子組件可以單獨使用$attrs，如上面的{{$attrs.placeholder}}依然是繼承父組件的placeholder屬性
例2：假設有三個組件A組件包含B,B組件包含C組件
A組件（App.vue）
<template>
<div id="app">
<child1 :p-child1="child1" :p-child2="child2" v-on:test1="onTest1" //此處監聽了兩個事件，可以在B組件或者C組件中直接觸發 v-on:test2="onTest2">
</child1>
</div>
</template>
<script>
import Child1 from './Child1.vue';
export default {
data() {
return {};
},
components: { Child1 },
methods: {
onTest1() {
console.log('test1 running...');
},
onTest2() {
console.log('test2 running');
}
}
};
</script>
B組件（Child1.vue）<template>
<div class="child-1">
<p>in child1:</p>
<p>props: {{pChild1}}</p>
<p>$attrs: {{$attrs}}</p>
<hr>
<!-- C組件中能直接觸發test的原因在於 B組件調用C組件時 使用 v-on 綁定了$listeners 屬性 -->
<!-- 通過v-bind 綁定$attrs屬性，C組件可以直接獲取到A組件中傳遞下來的props（除了B組件中props聲明的） -->
<child2 v-bind="$attrs" v-on="$listeners"></child2>
</div>
</template>
<script>
import Child2 from './Child2.vue';
export default {
props: ['pChild1'],
data() {
return {};
},
inheritAttrs: false,
components: { Child2 },
mounted() {
this.$emit('test1');
}
};
</script>
C 組件 (Child2.vue)<template>
<div class="child-2">
<p>in child2:</p>
<p>props: {{pChild2}}</p>
<p>$attrs: {{$attrs}}</p>
<hr>
</div>
</template>
<script>
export default {
props: ['pChild2'],
data() {
return {};
},
inheritAttrs: false,
mounted() {
this.$emit('test2');
}
};
</script>
喜歡這篇文章？歡迎打賞~~
