7.Vue3.2的provide和inject的使用

简单描述一下provide和inject的使用场景

当组件之间需要实现祖孙传值的时候（敲重点，其实父子也可以用，曾增增祖父和曾曾曾孙子也可以传值）

好了直接上代码

//这里是祖先组件
<script setup>
//引入provide
import { ref,provide } from 'vue'
//导入组件A 相当于是儿子组件
import A from '@/components/provideAndinject/1.vue'
//provide注入，前面为名字，后面为内容。若想实现祖孙直接通信，就加一个ref包裹或者reactive包裹
provide('flag',ref(false))

</script>

//这里是父组件
<template>
  <div class="container">
    我是1组件
    {{data}}
    <B/>
  </div>
</template>

<script setup>
import { inject } from 'vue'
//导入父亲的儿子组件 相当于祖先组件的孙组件
import B from './2.vue'
//这里可以看到其实父组件也是可以拿到flag的值
//使用inject接收
let data = inject('flag')
</script>

//这里是孙组件
<template>
  <div class="container2">
    我是2组件
    {{data}}
    <button @click="changeFlag">改变flag值</button>
  </div>
</template>

<script setup>
import { reactive, inject } from 'vue'
//孙组件接收祖先组件传过来的值 
let data = inject('flag')
//因为祖先组件传过来的值包裹了ref 所以可以在孙组件直接修改 flag的值
const changeFlag = () => {
  data.value = true
}
</script>

好了，就是Vue3.2setup语法糖provide 和inject 的使用了