provide 和 inject 通常成对一起使用，使一个祖先组件作为其后代组件的依赖注入方，无论这个组件的层级有多深都可以注入成功，只要他们处于同一条组件链上。
provide：提供一个值，可以被后代组件注入。
inject：注入一个由祖先组件或整个应用 (通过 app.provide()) 提供的值
父组件
<template><div>{{msg}}<A></A></div></template>
<script setup lang="ts">
import { provide, ref } from 'vue'
let msg=ref('hello')
provide('msg',ref(msg))
</script>
<style lang="scss" scoped>
div{width: 4rem;height: 4rem;background-color: red;
}
</style>子组件
<template><div class="about">A<B></B></div></template><script setup lang="ts"></script><style lang="scss" scoped>.about{width: 2rem;height: 2rem;background-color: rgb(39, 168, 45);}</style>B组件
inject如果在注入一个值时不要求必须有提供者，那么我们应该声明一个默认值
<template><button @click="change">点击</button><div class="abouts">{{msg}}</div></template><script setup lang="ts">
import { inject, Ref,ref} from 'vue';const msg=inject<Ref<string>>('msg',ref('bai'))const change=()=>{msg.value='hi'}</script><style lang="scss" scoped>.abouts{width: 2rem;height: 2rem;background-color: rgb(53, 47, 233);}</style>组件通信
vue2通信
props，emit：实现父子组件，子父组件，兄弟组件通信
自定义事件：实现子父组件通信
全局事件总线：实现任意组件通信
vuex：集中状态管理器，实现任意组件通信
ref：父组件获取子组件实例，获取子组件的响应数据及方法
slot：插槽，实现父子组件通信
vue3通信
props
实现父子组件通信，只读
emit
实现子组件传值给父组件
mitt
v-model
useAttrs
ref和$parent
provide和inject
pinia
slot
