vue2之使用provide/inject父子祖孙组件之间的传值

官网概念：provide/inject需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。

使用方法：在父组件中使用provide传值，在子组件中用inject接收

// 父组件
data(){
  return {
    name:'阔落'
  }
},
provide() {
  return {
    name:this.name
  }
}

　　

// 子组件
inject:['name']

　　但是这样传值有个问题，会发现当父组件name值改变时，子组件接收到的name值不会改变，即数据没有响应性。

响应式方法

// 父组件
data(){
  return {
    name:'阔落'
  }
},
provide() {
  return {
    newName:()=>this.name
  }
}

　　

// 子组件
inject:['newName'],
computed:{
  getNewName() {
       return this.newName()
   }
}

　　

// 子组件中的使用方式
<div>{{getNewName}}</div>
// 或者，更推荐使用上一种
<div>{{newName()}}</div>