在开始介绍之前先看下vue官方文档对 $attrs和 $listeners的解释：
vm.$attrs
包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过v-bind="$attrs"传入内部组件——在创建高级别的组件时非常有用。
vm.$listeners
包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过v-on="$listeners"传入内部组件——在创建更高层次的组件时非常有用。
讲真，我看了几遍也是没看懂，既然如此那就举个栗子来说明吧，先看如下图组件多级嵌套的情况：
图1
如图所示，A B C组件的嵌套关系如图所示，如果从数据从A组件到B组件则用props属性即可，将更新的数据传回A组件则采用
$emit触发A组件自定义函数即可，那么直接从A组件到C组件如何传递数据呢？方案1：采用Vuex进行统一的状态管理。如果项目不是很大，组件间的全局共享状态不多，则使用vuex反而复杂
方案2：将A组件的数据传到B组件在从B组件传到C组件。会造成代码繁琐维护困难等。
在vue2.4中，为了解决该需求，引入了
$attrs 和$listeners ， 新增了inheritAttrs 选项。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<App />
</div>
<script src="../node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let GrandSon = {
template: `<div>这是孙组件，获取的父组件信息为：{{coo}} {{ceo}}
<button type="button" @click="changeData">点击更新数据到父组件</button>
<button type="button" @click="changeChildData">点击更新数据到Child组件</button>
</div>`,
props: ['coo','ceo'],//即使props中加入foo也无法获取值，因为foo属性已在Child组件注册
data(){
return {
}
},
methods: {
changeData(){
this.$emit('updateData', {
name: 'zhang',
age: '22'
})
},
changeChildData(){
this.$emit('updateChildData', {
name: 'qianfeng'
})
}
},
}
let Child = {
props: ['foo'],
inheritAttrs: true,
template:`<div>这是子组件,获取的父组件信息为:{{foo}}
<GrandSon v-bind="$attrs" v-on="$listeners" @updateChildData="updateChildData" />
</div>`,
components: {
GrandSon,
},
mounted(){
//$attrs属性获取子组件的props中未注册父组件传递过来的属性，即除了foo以外的属性
console.log('this.$attrs:', this.$attrs)
},
methods: {
updateChildData(data){
console.log(data)
}
}
}
let App = {
template: '<div>这是父组件<Child :foo="foo" :coo="coo" :ceo="ceo" @updateData="updateData" /></div>',
data(){
return {
foo: '父组件内容foo',
coo: '父组件内容coo',
ceo: '父组件内容ceo',
}
},
components: {
Child,
},
methods: {
updateData(data){
console.log(data)
},
},
}
let vm = new Vue({
el: '#app',
data(){
return {}
},
components: {
App,
},
})
</script>
</body>
</html>
如上述代码，App代表A组件，Child代表B组件，GeandSon代表C组件，数据从A组件到B组件依然通过父组件自定义属性，子组件注册props接受属性值的形式。
不同的是在Child组件中绑定了$attrs和$listeners,而在Child组件props中注册了父组件传递过来的foo属性，在GrandSon组件的props中注册了coo、ceo属性，那么$attrs则起到将coo ceo属性从父组件传到孙组件的作用，同样如果要在孙组件改变数据后回传到父组件，只需要在Child组件中绑定$listeners即可，依然是通过父组件自定义事件，孙组件通过$emit触发函数。
接下来介绍inheritAttrs：
inheritAttrs：默认情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false，这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例属性 $attrs 可以让这些特性生效，且可以通过 v-bind 显性的绑定到非根元素上。
执行上面代码查看子组件的DOM元素，如下图：
image.png
简单来说就是，当子组件的props中未注册父组件传递过来的属性时：
当设置
inheritAttrs: true(默认)时，子组件顶层标签会渲染出父组件传递过来的属性，当设置
inheritAttrs: true时，子组件顶层标签不会渲染父组件传递过来的属性；无论
inheritAttrs为true或者false，子组件中都能通过$attrs属性获取到父组件中传递过来的属性,参考上面的console.log(this. $attrs)打印出来的值即可。
网友评论