vue inheritAttrs、$attrs和$listeners使用

inheritAttrs、$attrs和$listeners使用场景：

组件传值，尤其是祖孙组件有跨度的传值。

（1）inheritAttrs

属性说明：https://cn.vuejs.org/v2/api/#inheritAttrs

说明比较晦涩。

组件传值一般是通过props传值的。inheritAttrs默认值为true，true的意思是将父组件中除了props外的属性添加到子组件的根节点上(说明，即使设置为true，子组件仍然可以通过$attr获取到props意外的属性)。示例代码：

grandpaDom.vue：

<template>
<div>
<father-dom
 :foo="foo"
:coo="foo"
v-on:upRocket="reciveRocket"
>
</father-dom>
</div>
</template>
<script>
import fatherDom from "./fatherDom.vue";
export default {
data() {
return {
foo:"Hello, world",
coo:"Hello,rui"
}
},
components:{fatherDom},
methods:{
reciveRocket(){
window.console.log('火箭发射成功！')
}
}
}
</script>

fatherDom.vue：

<template>
<div>
<p>------------fatherDom-------------</p>
<p>attrs:{{$attrs}}</p>
<p>foo:{{foo}}</p>
<p>------------fatherDom-------------</p>
<child-dom v-bind="$attrs" v-on="$listeners"></child-dom>
</div>
</template>
<script>
import childDom from "./childDom.vue";
export default {
name:'father-dom',
props:["foo"],
components:{childDom},
}
</script>

说明：grandpaDom.vue将foo和coo属性都放在fatherDom.vue上，但是fatherDom.vue的props值接收了foo，因此grandpaDom的coo属性显示在了fatherDom的根节点上。即：

接着将inheritAttrs:false后（请将fatherDom.vue添加inheritAttrs:false），coo属性就不会显示在fatherDom根节点上了。但是怎么获取到coo呢？

这时就通过$attrs获取到到coo。

接着看孙组件childDom.vue:

<template>
<div>
<p>------------childDom-------------</p>
<p>coo:{{coo}}</p>
<button @click="startUpRocket">我要发射火箭</button>
<p>------------childDom-------------</p>
</div>
</template>
<script>
export default {
name: "childDom",
props: ["coo"],
methods: {
startUpRocket() {
this.$emit("upRocket");
window.console.log('我要发射火箭了。')
}
}
};
</script>