vue3 祖孙通信

利用provide和inject 

 provide用于向子组件(或子组件中的子组件，无限嵌套)提供自身的一些数据，或者将自身所有属性全部提供，但是提供的数据均为非响应式数据。

 inject用于引入父级组件所提供的数据

 

1、祖父组件

import {ref, reactive,provide} from "vue";

const grandFatherData = ref('我是祖父组件数据');
const grandFatherFun = ()=>{
    console.log("我是祖父组件方法")
}
 provide('grandFatherData1',grandFatherData.value ); //将数据和方法导出
 provide('grandFatherFun1',grandFatherFun );

 

2、孙子组件

import {ref, reactive,inject} from "vue";

const fun = inject('grandFatherFun') // 接受
const data = inject('grandFatherData');

const getGrandFatherData = ()=>{
    fun(); //调用方法
    console.log(data); //调用数据
}