vue 子组件获取祖先组件的值

一、inheritAttrs和attrs

在vue项目开发中可能会遇到 父组件 给 子组件 传值，这个值还要从子组件传给他的子组件，所以我们就会看到这样的代码。

//父组件

    

 
//子组件

    

 
//子组件的子组件

    
{{text}}

这样做非常麻烦且不利于维护，但是通常我们可以用vuex来解决，但是不复杂的项目中仅仅因为这一个问题就引入vuex是在没有必要，于是vue提供了 inheritAttrs 和 attrs 两个功能来解决这样的问题：官网连接

//父组件

 

//子组件

注意，这里父组件的count属性仅仅挂在子组件上，并没有使用。此时我们打开浏览器，可以看到子组件的dom上显示的展示了count="123456"。

此时，我们可以通过设置inheritAttrs: false来取消这种默认行为：

data(){
  return{
    ......   
  }  
}
 
inheritAttrs: false,
mounted(){
  console.log(this.$attrs); //{count:123456}
}

这时再看dom上就没有count属性了。然后，我还打印了this.attrs中供子组件使用，然而这并没有解决开头子组件的子组件获取值的问题。别急，我们只需要在子组件上加个东西就可以了：

一、provide / inject

provide/inject方法要比`inheritAttrs/attrs更适合用来做父组件给子组件或孙组件传值，先发一个文档的链接：provide/inject

//父组件使用provide

 

 
//此时可以在子组件通过这种方式获取父组件中“parent”的值：
//子组件中
export default {  
  mounted(){      
    console.log(this.parent); //"父组件的值"  
  },  
  inject: ['parent'],
}

需要注意的是provide和inject的绑定并不是响应的，但是如果我们provide的是一个对象，那么这个对象的属性仍是可响应的。我们可以用以下方法同样可以解决上面三中的问题

//父组件使用provide

 
//此时可以在子组件通过这种方式获取父组件中所有parent所有响应数据：
//此时在子组件中this.parent.name是响应式的，即父组件的name修改，子组件获取的name也会做出响应的变化
//子组件中
export default {  
  mounted(){      
    console.log(this.parent.name); //"父组件某个属性的值"  
  },  
  inject: ['parent'],
}

转载声明：
    作者：陈杰夫
    链接：https://juejin.im/post/5adc99f56fb9a07abd0d3ee7
    来源：掘金
    声明：著作权归作者所有，谢绝商业转载。如需转载请联系原作者或者按照其原文声明进行操作。