vue3学习 provide 与 inject实现祖先与后代组件之间的通信

provide（提供） 和 inject（获取）可以实现祖先与后代（ 跨级之间通讯 ）组件之间的通信

祖先组件中：

setup() {
    let person = reactive({
      name:'green',
      age:10
    })
    provide('msg',person) // 向后代提供数据
    return {person}
  }

后代组件中：

 setup () {
    let person = inject('msg') // 通过inject获取到祖先原先向下注入的数据

    return {person}
  }

注：如果祖先元素provide向下注入的数据是一个响应式数据（ref / reactive 数据），那么后代组件中inject 获取到 的数据也是响应式数据，可以之间在后代元素中对祖先元素中的数据进行修改。