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

发布时间 2023-04-19 11:01:54作者: 络角阔落

官网概念: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>