三个组件:输入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. wpf 查找指定类型的子元素

    public List<T> GetChildObjects<T>(DependencyObject obj, Type typename) where T : Framewo ...

  2. Oracle虚拟机与主机共享设置

    VM中linux与主机的文件共享 1.打开 Oracle VM VirtualBox   点击 [控制] [设置] [数据空间] 添加你所希望共享的文件夹

  3. c基础-Makefile

    Makefile gcc 测试c编译流程.c->.i->.s->.o->可执行程序 # a.c->a.i->a.s->a.o->a# .i 文件生成 - ...

  4. AVL tree rotate

    AVL tree single rotate /** * Rotate binary tree node with left child. * For AVL trees, this is a sin ...

  5. OceanBase使用OBLOADER、OBDUMPER进行导入导出

    需求背景 需要定时给OB进行数据备份,并且在需要时可以全量导入,所以只能通过脚本来减少手动操作的繁琐. 脚本示例 导出脚本 #!/bin/bash # 这一步不能省,如果不设置定时运行时可能会有问题 ...

  6. AspectRatio、Card 卡片组件

    一.Flutter AspectRatio 组件 AspectRatio 的作用是根据设置调整子元素 child 的宽高比. AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展,wi ...

  7. linux 下用其他用户来执行命令

    sudo su - username -l -c "supervisorctl restart apps" -l , –login:加了这个参数之后,就好像是重新登陆一样,大部分环 ...

  8. List集合转换成数组

    我现在有个需求:将File集合转换成MultipartFile数组结构 然后我就开始在网上开启了List转换到数组之旅. 首先来看一个例子 ArrayList<String> list=n ...

  9. python连接Oracel、postgreSQL、SQLserver、Mysql、mongodb、redis等常用数据库方法汇总

    python对接常用数据库 python有着极其丰富的第三方的库,如此强大的python语言操作各大数据库,不管你使用的关系型数据库是oracle,mysql, sqlserver,还是关系型数据库r ...

  10. VC 运行时库的引用区别 /MD、/MDd 和 /MT、/MTd和DllMain函数

    /MT和/MTd表示采用多线程CRT库的静态lib版本.该选项会在编译时将运行时库以静态lib的形式完全嵌入.该选项生成的可执行文件运行时不需要运行时库dll的参加,会获得轻微的性能提升,但最终生成的 ...