首页 > 其他分享 >Vue3 - provide 提供的异步数据 inject 得到的数据 undefined 或 null

Vue3 - provide 提供的异步数据 inject 得到的数据 undefined 或 null

时间:2023-09-27 17:11:59浏览次数:37  
标签:const undefined provide paper inject 组件 null 数据

如下所示,父组件(祖先组件)通过 provide 函数向所有后代组件传递 prop。但是这两个 Ref 类型的数据最开始没有,需要等到 onMounted 初始化之后才有值。此时会遇到两个问题

  1. 后代组件在 setup 函数中或者 onBeforeMount 等非常周期中调用,可能获取的是 undefined 或者 null。
  2. 传递响应式数据(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

相关文章

  • 【FATE联邦学习】AnsibleFATE离线部署出现AnsibleUndefinedVariable: ‘ansible_ssh_h
    本人已经提issuehttps://github.com/FederatedAI/FATE/issues/5059.根据群友钟紫英的方法,修改project_path/enviroments/prod/hosts中的[fate]组:render后原文:#前面省略ansible_become_method=sudoansible_become_user=rootansible_become_pass=[deploy_check][fate]1......
  • Uncaught TypeError: Cannot read properties of undefined (reading 'form')问题的解
    问题描述使用vue3执行数据添加操作时,发现了这个错误,使用测试按钮拿文本框数据,一直报错拿不到:问题解决原来是vue2在执行这个操作时:里面放this.form;而vue3在执行这个操作时,里面放的却是:form......
  • 解决 undefined function bcdiv()问题
    在Deepin中php7.2遇到问题:UncaughtError:Calltoundefinedfunctionbcdiv()1bcdiv函数的作用(点我查看)原因是因为缺少了PHP的bcmath扩展,导致电脑无法识别该函数。解决办法:1、查看当前php版本PHP-v12、更新源Centos下:sudoyumupdate1Ubuntu或Deepin下:sudoapt-get......
  • Angular ModuleWithProviders 类型的使用场景介绍
    import{ModuleWithProviders}from'@angular/core'这行代码在Angular中有着重要的作用,它引入了ModuleWithProviders类型从@angular/core模块中。为了更好地理解这行代码的作用,我们需要深入探讨Angular中模块(Modules)的概念以及如何使用ModuleWithProviders类型。Angula......
  • Angular APP_INITIALIZER Injection Token 的使用方法介绍
    import{APP_INITIALIZER}from'@angular/core'这行代码在Angular中的作用是导入名为APP_INITIALIZER的常量,它来自Angular核心模块@angular/core。APP_INITIALIZER是一个重要的Angular特性,它用于执行一系列初始化操作,通常用于配置应用程序之前执行一些必要的任务。......
  • Angular 应用开发中 Injection Token 的使用方法介绍
    Angular是一个流行的前端JavaScript框架,它提供了一种强大的方式来构建单页应用程序(SPA)。在Angular中,依赖注入(DependencyInjection,DI)是一项关键的功能,它允许我们有效地管理应用程序中的依赖关系。Angular的依赖注入系统使用InjectionToken来实现某些特殊的依赖注入需求。在本文中,......
  • Uncaught TypeError: Cannot read properties of undefined (reading 'type') from e
    DON'Tusereforreactivetowraptheechartsinstance.UseacommonvariableorshallowReftoavoidthedeepwatchforechartsinstance.不要使用ref或reactive来包装echarts实例。使用公共变量或shallowRef来避免对echarts实例的深度监视。<template><d......
  • 进程注入之Portable Executable Injection,PE注入的核心是创建远程线程,注意重定位表修
     PE(Portable Executable)注入是一种常见的代码注入技术,主要用于在目标进程中执行恶意代码。以下是PE注入的基本流程:1. 获取当前PE映像的基地址:使用GetModuleHandle(NULL)函数获取当前PE映像(即要注入的代码)的基地址。2. 复制PE映像:使用VirtualAlloc函数在当前进程中分配一块新......
  • Denpendcy Injection 8.0新功能——KeyedService
    DenpendcyInjection8.0新功能——KeyedService本文只介绍.NETDenpendcyInjection8.0新功能——KeyedService,假定读者已熟练使用之前版本的功能。注册带Key的类8.0之前,注册一个类往往是AddSingleton<IFoo,Foo>(),8.0添加了一个新功能:“可以注册一个带Key的类”AddKeyedSin......
  • 【转载】Vue Provide / Inject 详细介绍(跨组件通信、响应式变化、版本变化)
    版权声明:本文为CSDN博主「前端不释卷leo」的原创文章,遵循CC4.0BY-SA版权协议,转载请附上原文出处链接及本声明。原文链接:https://blog.csdn.net/qq_41809113/article/details/122071958 一、背景通常,当我们需要从父组件向子组件传递数据时,我们使用props。想象一下这样的结......