组件间通信provide和inject

vue3提供两种方法，分别为（爷爷提供）provide（提供）和（孙子）inject（注入）。

可以实现隔辈传入数据，且孙子组件可以修改爷爷提供的数据。

即如果子组件再调用子组件，那么父组件可以通过provide 和 inject来实现父孙志坚消息通行。

①实现父子组件调用子组件， 子组件再调用子组件

②父组件通过provide孙子组件提供数据

import { ref,provide } from 'vue';
let car = ref('法拉利')
// 祖先组件给后代组件提供数据
// provide需要两个参数  第一个参数:提供的数据key    第二个参数:祖先组件提供数据
provide("TOKEN", car)//注意 ，这里是传car不是car.value，如果传car.value就不是响应式的了  下面的图片是错误的，得更正

 ③孙子组件通过inject使用数据

import { inject } from 'vue';
// 注入祖先组件提供的数据  
// 需要的参数：祖先提供的数据

let car = inject('TOKEN')

 ④孙子组件修改父组件的数据

let car = inject('TOKEN')const handler = ()=>{car.value = '飞机'
}