利用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); //调用数据 }
标签:grandFatherFun,const,provide,通信,grandFatherData,inject,vue3,组件,祖孙 From: https://www.cnblogs.com/symlove/p/17467306.html