vue中的provide和inject

provide可以写成对象或者函数：

//对象模式，要提供的值后面可以直接写字符串，要想使用data中数据，必须写成函数
provide: { name: 'zhangsan' }
//函数模式,可以使用data中的数据
provide() {
	return {
		name: this.name
	}
}

inject可以写成以下几种样式：

//第一种，元素值必须和provide提供的key一致，此值就像data中的值，可以直接在模板中使用，或在script中通过this.name获取
inject: ['name']
//第二种，sonName是子组件中要使用的变量名（注入的值），name是从父组件中获取的值（抛出的值）
inject: {
	sonName: 'name'
}
//第三种，name: {}等价于name: {from: 'name'}
inject: {
	name: {}
}
//第四种,和第三种一样
inject: {
	sonName: {
		from: 'name'
	}
}
//第五种，加上了默认值
inject: {
	sonName: {
		from: 'name',
		default: 'lisi'
	}
}
//第六种，等价于sonName：{from:'sonName',default:'lisi'}
inject: {
	sonName: {
		default: 'lisi'
	}
}

最后，要想使传递的值是响应式的，值必须是object类型的（但是整体更改这个object值，并不响应），并且子组件变更这个对象中的值，父组件中也会跟着更改，就像父子组件共用一个对象（其实应该也是共用一个对象）。
相关参考：
https://blog.csdn.net/Shids_/article/details/121650411
https://segmentfault.com/a/1190000041430527
https://v2.cn.vuejs.org/v2/api/#provide-inject