Vue provide inject 实现响应式

最近在项目中有涉及到关于祖孙组件之间的传值，立马想到vue中的 provide/inject 打开官方文档

类型

// 一个对象或者是返回对象的函数
provide：Object | () => Object
// 一个字符串数组 或 一个对象 
inject：Array<string> | { [key: string]: string | Symbol | Object }

详细

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。如果你熟悉 React，这与 React 的上下文特性很相似。

注意

使用方法

这里我们只列举一种常用的使用方法，其它的可去官方文档中查看，非常的详细 vue provide/inject

// 父级组件提供 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// 子组件注入 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}

响应式传值方式

// 父级组件提供 'foo'
var Provider = {
  data () {
  	return {
  		bar: 'this is bar'
  	}
  },
  provide: {
    foo: this // 将整个this传递过去
  },
  mounted () {
  	const that = this
    setTimeout(()=>{
        that.bar = 'change'
    },4000)
  }
}

// 子组件注入 'foo'
var Child = {
  inject: ['foo'],
  created () {
    // 下面都是响应式的,因为都是同一实例下的引用
    console.log(this.foo.bar) // => "this is bar --> change"
  }
  // ...
}

vue3 中的使用方法

vue3 官方文档详解（包括响应式）