名词解释
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>
