一、inheritAttrs和attrs
在vue项目开发中可能会遇到 父组件 给 子组件 传值，这个值还要从子组件传给他的子组件，所以我们就会看到这样的代码。
//父组件
<div>
<child :text="text"></child>
</div>
//子组件
<div>
<my-child :text="text"></my-child>
</div>
//子组件的子组件
<div>
<div>{{text}}</div>
</div>
这样做非常麻烦且不利于维护，但是通常我们可以用vuex来解决，但是不复杂的项目中仅仅因为这一个问题就引入vuex是在没有必要，于是vue提供了 inheritAttrs 和 attrs 两个功能来解决这样的问题：官网连接
//父组件
<template>
<div>
<child :text="text" :count="count"></child>
</div>
</template>
<script>
export default{
data(){
return {
text:"父组件的值"，
count:123456，
}
}
}
</script>
//子组件
<template>
<div>{{text}}</div>
</template>
<script>
export default{
props:["text"]
}
</script>
注意，这里父组件的count属性仅仅挂在子组件上，并没有使用。此时我们打开浏览器，可以看到子组件的dom上显示的展示了count="123456"。
此时，我们可以通过设置inheritAttrs: false来取消这种默认行为：
data(){
return{
......
}
}
inheritAttrs: false,
mounted(){
  console.log(this.$attrs); //{count:123456}
}
这时再看dom上就没有count属性了。然后，我还打印了this.attrs中供子组件使用，然而这并没有解决开头子组件的子组件获取值的问题。别急，我们只需要在子组件上加个东西就可以了：
<template>
<div class="child">
<my-child v-bind="$attrs"></my-child>
</div>
</template>
一、provide / inject
provide/inject方法要比`inheritAttrs/attrs更适合用来做父组件给子组件或孙组件传值，先发一个文档的链接：provide/inject
//父组件使用provide
<template>
<div class="parent">
<child-component></child-component>
</div>
</template>
<script>
export default {
......
provide: {
parent: "父组件的值"
},
components:{
child-component,
},
......
</script>
//此时可以在子组件通过这种方式获取父组件中“parent”的值：
//子组件中
export default {
mounted(){
console.log(this.parent); //"父组件的值"
},
inject: ['parent'],
}
需要注意的是provide和inject的绑定并不是响应的，但是如果我们provide的是一个对象，那么这个对象的属性仍是可响应的。我们可以用以下方法同样可以解决上面三中的问题
//父组件使用provide
<script>
export default {
provide () {
return {
parent: this
}
},
data () {
return {
name: ''
}
}
}
</script>
//此时可以在子组件通过这种方式获取父组件中所有parent所有响应数据：
//此时在子组件中this.parent.name是响应式的，即父组件的name修改，子组件获取的name也会做出响应的变化
//子组件中
export default {
mounted(){
console.log(this.parent.name); //"父组件某个属性的值"
},
inject: ['parent'],
}
转载声明：
作者：陈杰夫
链接：https://juejin.im/post/5adc99f56fb9a07abd0d3ee7
来源：掘金
声明：著作权归作者所有，谢绝商业转载。如需转载请联系原作者或者按照其原文声明进行操作。
