三个组件:输入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. oracle 分配权限命令

    Oracle分配权限 以管理员身份登录数据库 创建用户:create user [username] identified by [password]; 赋予登录权限:grant create ses ...

  2. Go语言的常用函数方法整理大全-实践总结

    文章目录 前言 一.数据类型与相互转化 1.1 常用的数据类型 1.2 常用数据类型的转化 1.2.1 整形转字符串 1.2.2 字符串转整形 1.2.3 浮点转字符串 1.2.4 字符串转浮点 二. ...

  3. MySQL 的limit

    题目 limit:从倒数第二行开始,往前查找一行

  4. ES bool查询

    一.bool查询包含四种操作 1.must 2.must not 3.filter 4.should 二.功能 1.must 对应mysql的 and a= 2.must not 对应mysql的 a ...

  5. 【Windows】IP 地址变为 169.254.x.x 的解决方法

    最近每次开机 IP 地址都会自动跳至 169.254.x.x 段,连接不上网络,设置了固定 IP 也会跳段.因此找到以下解决方法: 『IP地址变成169.254.x.x 和固定ip两个IP地址的解决办 ...

  6. everything 基本功能是本地搜索 高级功能 可以建立 HTTP服务器

    局域网,可以查看,播放,等操作

  7. gdb 常用命令总结

    安装插件 1. 安装GDB增强工具 (gef) * wget -q -O- https://github.com/hugsy/gef/raw/master/scripts/gef.sh | sh2. ...

  8. 瞬间并发测试-jmeter

    测试需求:秒杀场景,瞬间并发.通常来说,JMeter的线程数即为并发的压力数,实际上JMeter在运行时,每个线程是独立的,虽然有100个线程,但这些线程并不是同时向服务器发送请求,JMeter要模拟 ...

  9. matlab画图之plot画折线图

    Matlab绘制折线图 使用plot(x,y)函数创建折线图时,x,y有以下要求: ①如果 X 和 Y 都是向量,则它们的长度必须相同.plot 函数绘制 Y 对 X 的图. ②如果 X 和 Y 均为 ...

  10. python虚拟环境和包管理

    新建一个虚拟环境: python3 -m venv env1 # 新建一个名称为env1的虚拟环境 激活环境: source env1/bin/activate 退出虚拟环境: deactivate ...