三个组件:输入A组件 输出B组件 TestContext组件,数据x。

方法:

  输入端(A):

    import TestContext from "TestContext组件路径";
    const A = () => {
      //如果需要监控可对数据x useState
      <CartContext.Provider value={{数据x,方法}}>

              <别的组件/>
          </CartContext.Provider>
    }

  Context端:

    import React from "react";

    const CartContext = React.createContext({
       数据的格式,并赋基础值。
      数据名: '',
      方法的格式:
      方法名: () => {}
    });
    export default CartContext;

  输出端(B):

    import TestContext from "TestContext组件路径";

    const B = () => {

      const asd = useContext(CartContext);

      然后用asd.数据名 来调用就好了。

      asd.方法名();

    }

 
好处是不用十万八千里的用props
坏处是这玩应谁都能用

Context,多个组件公用的数据传导方法的更多相关文章

  1. vue 的父组件和子组件互相获取数据和方法

    父组件主动获取子组件的数据和方法 一.ref(但不能实时更新获取) 1.调用子组件的时候 定义一个ref <child ref="headerChild"></c ...

  2. vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法

    1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...

  3. vue组件间的数据和方法传递

    方法 1.父组件调用子组件:ref(在子组件中加上ref即可通过this.$refs.ref.method调用) 2.子组件调用父组件:emit(this.$emit(调用的方法名,传递的参数)) 数 ...

  4. vue组件通信之父组件主动获取子组件数据和方法

    ref 可以用来获取到dom节点,如果在组件中应用,也可以用来获取子组件的数据和方法. 比如,我定义了一个home组件,一个head组件,home组件中引用head组件. 此时,home组件是head ...

  5. 关于VUE调用父实例($parent) 根实例 中的数据和方法

    this.$parent或者 this.$root 在子组件中判断this.$parent获取的实例是不是父组件的实例 在子组件中console.log(this.$parent)  在父组件中con ...

  6. Vue中组件通信的几种方法(Vue3的7种和Vue2的12种组件通信)

    Vue3组件通信方式: props $emit expose / ref $attrs v-model provide / inject Vuex 使用方法: props 用 props 传数据给子组 ...

  7. React中的Context——从父组件传递数据

    简介:在React中,数据可以以流的形式自上而下的传递,每当你使用一个组件的时候,你可以看到组件的props属性会自上而下的传递.但是,在某些情况下,我们不想通过父组件的props属性一级一级的往下传 ...

  8. React之使用Context跨组件树传递数据

    ---------------------------------  讲解一 原文:https://blog.csdn.net/xuxiaoping1989/article/details/78480 ...

  9. Context - React跨组件访问数据的利器

    Context提供了一种跨组件访问数据的方法.它无需在组件树间逐层传递属性,也可以方便的访问其他组件的数据 在经典的React应用中,数据是父组件通过props向子组件传递的.但是在某些特定场合,有些 ...

  10. vue.js 组件之间传递数据

    前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关 ...

随机推荐

  1. mysql 消息表分区方案

    首先先看消息表创建脚本 我们用hash分区 在字段 user_id 分成100个区 CREATE TABLE `messages` ( `id` int(10) unsigned NOT NULL A ...

  2. maven重点分析

    目录 什么是maven pom.xml 约定大于配置 根元素和必要配置 父项目和parent元素 项目构建需要的信息 路径管理 资源管理 详细使用 filtering的使用 怎么理解pom中多个res ...

  3. PHP开启缓存加速

     PHP默认会将Operate Code文件丢弃,缓存加速是将其保存下来,放置共享内存中,以便在下次调用该PHP页面时重用,避免相同代码的重复编译 __________________________ ...

  4. 对于小白如何才能学好Java

    我们学习任何一种编程语言,不是去无目的的网上找太多的教程,而是首先从宏观了解它的基本思想方法定义概念,从宏观感受它的逻辑与抽象,然后是实践,不断的实践.今天我们看看网上给我们小白的一些学习建议. 一. ...

  5. mariadb数据库用户管理(创建、赋权、)

    数据库查看当前用户 select user(): MariaDB [(none)]> select user(); +----------------+ | user() | +-------- ...

  6. imputation-文献:False signals induced by single-cell imputation(scRNA-seq插补引入的假阳性问题)

    文章题目 False signals induced by single-cell imputation 中文名: 单细胞插补引起的假信号 文章地址: https://f1000research.co ...

  7. vue项目的两种构建工具Vue CLI和Vite

    Vue CLI官方项目搭建工具,使用的打包器是webpack,webpack使用的模块化规范是commonjs模块: Vite主要特点是开发环境启动迅速,因为是使用的ES模块,这是在现代浏览器开始原生 ...

  8. Swift中 堆(heap)和栈(stack)的区别

    1.内存空间分为堆空间和栈空间 2.堆->引用类型(对象.函数.闭包)  栈->值类型(结构体.枚举.元组) 3.值类型赋值->深拷贝  引用类型赋值->浅拷贝 let a = ...

  9. C/C++ FILE 和 fstream 用法详解

    FILE 是C语言自带的文件操作结构体, fstream 是C++的文件操作类,两者使用都比较常见,且用法比较类似,再次记录. 功能 FILE fstream 打开文件 FILE* fopen(cha ...

  10. uniapp使用rich-text内容过长在真机无法滚动

    解决方案:在rich-text标签上加scroll-view解决 <scroll-view scroll-y="true" style="height: 745rp ...