如下所示,父组件(祖先组件)通过 provide
函数向所有后代组件传递 prop。但是这两个 Ref 类型的数据最开始没有,需要等到 onMounted
初始化之后才有值。此时会遇到两个问题
- 后代组件在 setup 函数中或者
onBeforeMount
等非常周期中调用,可能获取的是 undefined 或者 null。 - 传递响应式数据(
Ref
)时,如下例子,通过.value
传递非Ref
类型数据下去,导致后代组件不会更新数据,始终获取的最开始的值。
file:[Father.vue]
const paper = shallowRef<dia.Paper>();
const graph = shallowRef<dia.Graph>();
lit:[provide("bleuonPaper", paper.value);
provide("bleuonGraph", graph.value);]:lit
onMounted(() => {
const jointjs = initJointJs({
el: "bleuon__flowchat-content",
width: "85vw",
height: "75vh",
bgColor: "#ffffff"
});
});
file:[Child.vue]
const paper = inject("bleuonPaper");
标签:const,undefined,provide,paper,inject,组件,null,数据
From: https://www.cnblogs.com/Himmelbleu/p/17733156.html