官方文档对于provide和inject的说明:传送门.

由文档可以得知,这对选项必须搭配使用才能有效果

**使用场景:**当父组件需要给子孙组件共享父组件的数据时,在父组件中通过 provide 返回一个对象,在子孙组件中通过 inject:[key] (key是父组件provide对象绑定的key) ,如此就可以在子孙组件中共享父组件的数据

在使用场景中,肯定是希望父组件的数据一旦发生改变,子孙组件获取到的也是父组件更新后的数据。那么,怎么实现父组件与子孙组件所绑定的数据动态响应呢?

-------------------parent.vue----------------------
provide(){
    return {
   // keyName: {name:this.name}, // value 是对象才能实现响应式,也就是引用类型
      keyName: this.changeValue // 通过函数的方式也可以[注意,这里是把函数作为value,而不是this.changeValue()]
   // keyName: 'test' value 如果是基本类型,就无法实现响应式
    }
  },
data(){
  return {
	name:'张三'
}
  },
  methods: {
  	changeValue(){
  		this.name = '改变后的名字-李四'
  	}
  }  
  -------------grandson.vue-----------------
  inject:['keyName']
  create(){
	console.log(this.keyName) // 改变后的名字-李四
}
Logo

前往低代码交流专区

更多推荐