前言
在项目中，一个页面由多个组件构成，而某个组件需要用到另外一个同级组件的子组件的数据，再白话点就是你的兄弟要你儿子的信息，那这个信息的传递可以是：你的儿子告诉你，然后你转告你兄弟；也可以是把这个信息告诉爷爷，让爷爷告诉他的儿子。
思路
本文选择的通信方式就是第二种，使用Vue提供的provide/inject进行组件间通信。爷爷组件提供provide一个值以及一个方法，供后代们去获取与修改值，然后后代们就可以使用注入inject，去获取啦，并且可以修改这个值，修改后这个值在其他组件中也是动态滴。
正文
//爷爷组件
const provideData = ref('爷爷给的信息')
function changeData (newData){
provideData.value = newData
}
provide('grandpa',{provideData,changeData})
//错误写法：
//provide('granda',{data:provideData.value,change:changeData})
//如果这个写法，后代们使用了change方法去修改provideData,是不生效的。
//因为data:provideData.value相当于是data:'爷爷给的信息'，这个时候传的值就不是动态的了。
//父亲组件/孙子组件/...
//都可以使用爷爷组件提供的值与方法
const { provideData,changeData} = inject('grandpa')
const inputValue = ref()
//根据输入框的值修改爷爷提供的值
watch(inputValue,(newValue)=>{
changeData(newValue)
},{immediate:true})
//添加了immediata,在进入到该组件时，就会立刻修改爷爷提供的值
//页面使用
<div>{{provideData}}</div>
<input v-model="inputValue"/>
