首页 > 其他分享 >vue3 provide/inject使用

vue3 provide/inject使用

时间:2023-07-17 11:55:06浏览次数:33  
标签:vue curTabName provide inject vue3 组件 const

provide/inject 可解决深层组件传值问题

父组件

import { provide  } from "vue";

const curValue = ref(props.modelValue);
provide('curTabName',curValue);

  子组件

import {  inject } from "vue";

const curTabName = inject("curTabName");

  

 

标签:vue,curTabName,provide,inject,vue3,组件,const
From: https://www.cnblogs.com/jlyuan/p/17559697.html

相关文章

  • vue3axios怎么用
    Vue3中使用axios在Vue3中,可以使用axios来进行网络请求。axios是一个基于Promise的HTTP客户端,可以用于浏览器和Node.js,非常便捷和强大。安装axios在开始之前,首先需要安装axios。可以通过npm或者yarn来安装:npminstallaxios引入axios在Vue3中,可以使用import来引入axios:impor......
  • vue3axiosjwt拦截器
    实现Vue3axiosjwt拦截器介绍在Vue3项目中使用axios进行网络请求时,我们经常需要在每次请求中添加JWT令牌(JSONWebToken)以进行身份验证。为了简化这个过程,我们可以使用axios的拦截器来实现自动添加JWT令牌的功能。本文将指导你如何使用Vue3、axios和JWT来实现拦截器。整体流程......
  • vue3 封装api接口
    新建axiosj.tsimportaxiosfrom'axios';import{showMessage}from"./status";//引入状态码文件import{ElMessage}from'element-plus'//引入el提示框,这个项目里用什么组件库这里引什么//设置接口超时时间axios.defaults.timeout=60000;//请求地址,......
  • vue3 为什么使用 hooks?
    目的为了解决在组件中共享逻辑和状态的问题。 hooks提供了一种更简洁和直观的方式来共享逻辑和状态。vue3中的hooks是基于函数的组件模型,通过在函数组件内部使用特定的hook函数来实现。每个hook函数都有特定的用途,例如:useState用于创建和管理状态,useEffect用于......
  • SpringBoot+Vue3+MySQL集群 开发健康体检双系统
    第1章课程介绍试看4节|38分钟观看项目演示,熟悉大健康体检项目主要功能。掌握学习本课程的最佳方法,以及如何利用在线手册学习和答疑。第2章大健康体检项目全栈环境搭建16节|218分钟利用虚拟机或者云主机安装Linux系统和Docker环境,部署MongoDB、Redis、Minio和RabbitMQ等中......
  • Vue2或Vue3中实现页面锚点滚动(结合AntDesign a-steps
    核心代码 onStepChange(current){ this.current=current; document.querySelector(`[id='${current}']`).scrollIntoView({ behavior:"smooth",//定义过渡动画instant立刻跳过去smooth平滑过渡过去 block:"start",//定义垂直滚动方向的对齐start顶部(......
  • vue3项目 运行 报错 Cannot assign to "b" because it is a constant
    环境依赖node18.16.0vite4.4.4vue 3.2.47背景当前错误与环境依赖关系不大,是由于我在打包的文件写的代码错误导致的,一般情况不会有这个错报错信息X[ERROR]Cannotassignto"b"becauseitisaconstantThesymbol"b"wasdeclaredaconstanthere:原因将r......
  • Vue3 webSocket收到消息改变响应式全局对象从而实时改变界面
    需求在main.js中创建一个 响应式全局对象。通过WebSocket收到消息改变这个全局对象时,子组件应同步响应。效果:这几个标签框绑定的全局对象json main.js定义 响应式全局对象//全局对象constglobalData=reactive({extTelMonitorData:[{title:......
  • Vue3 响应式全局对象
    需求在main.js中创建一个 响应式全局对象。改变这个全局对象时,子组件应同步响应。效果:这几个标签框绑定的全局对象jsonmain.js定义 响应式全局对象//全局对象constglobalData=reactive({extTelMonitorData:[{title:'用户组一',......
  • flutter provider create: (_) => xxxx(),
    Provider通常使用ChangeNotifierProvider配合ChangeNotifier一起来实现状态的管理与Widget的更新。ChangeNotifierProvider本质上其实就是Widget,它作为父节点Widget,可将数据共享给其所有子节点Widget使用或更新;创建model,继承ChangeNotifier,用来实现数据更新的通知并监听......