三个组件:输入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. debian11命令行安装字体

    一.需要用到三条命令mkfontscale/mkfontdir/fc-cache这三条命令属于两个软件包mkfontscale/mkfontdir属于xfonts-utils包,fc-cache命令属 ...

  2. 日常开发记录-js的Date对象中的toLocaleDateString()

    就是把Date对象的日期部分转换为字符串,并返回结果. 代码示例: console.log(new Date()) // 2023-01-10T05:42:41.926Z console.log(ne ...

  3. JMeter创建上传文件脚本

    环境:Macbook10 ,apache-jmeter-4.0 1. 创建脚本:添加 -> Sampler -> HTTP请求 2.基本配置 3. 设置实现方式,这一步是关键的关键.... ...

  4. 安装oracle出现环境不满足最低要求

    安装win64_11gR2_database_1of2的时候出现这个,百度了下解决方法 在oracle安装包找到stage文件夹 然后找到cvu 然后在cvu里面找到cvu_prereq,用记事本打开 ...

  5. JMeter 三- Run JMeter in non-GUI mode

    Run Jmeter in non-GUI mode: 1. Swith to \Jmeter\bin 2. run "jmeter -n -t E:\JmeterforLoadGenesi ...

  6. ubuntu20.0.4 安装influxdb

    官网:https://docs.influxdata.com/influxdb/v2.3/install/?t=Linux1.命令:# Ubuntu/Debian wget https://dl.in ...

  7. 7. C语言科学计数法表示int

    c语言10的n次方写用e表示: 比如int a=10e2 表示10*10的2次方=1000: 注意:10e6, 代表10*10^6 不代表10^6. 10^6为1^6

  8. 关于 verilator 中 config.vlt 等配置文件的使用

    参考网页:https://verilator.org/guide/latest/exe_verilator.html#configuration-files 注意,在使用 config.vlt 配置文 ...

  9. Software--BigData--StreamingData

    2018-03-29 16:13:34 一 : 流系统分层架构设计 二: 分层技术选型分析 三:底层 -- 服务配置和协调 ZooKeeper

  10. Mysql Dao

    1 package dao; 2 3 import java.sql.Connection; 4 import java.sql.PreparedStatement; 5 import java.sq ...