三个组件:输入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. HOLIscapes使用条款与免责协议

    HOLIscapes(以下简称"我们")在此特别提醒您务必认真阅读.充分理解本<使用条款与免责协议>(以下简称"本协议")中各条款并选择是否接受本协 ...

  2. git 提交本地仓库到远程

    提交本地仓库到远程指定仓库 假如已经在远程github创建了项目 在本地创建了和github同样工程并添加了代码,如eclipse创建出工程并写了代码.要把这些代码提交到github git bash ...

  3. ipmitool使用报错Could not open device at /dev/ipmi0 or /dev/ipmi/0 or /dev/ipmidev/0: No such file or directory

    ipmitool使用报错处理 Could not open device at /dev/ipmi0 or /dev/ipmi/0 or /dev/ipmidev/0: No such file or ...

  4. 攻防世界-fileinclude

    一道简单的文件包含题目,源代码如下 一.代码分析 此题中关键代码为 分析此处代码可知,$lan的值是cookie中language所对应的值,当该值不为english时,会将$lan的值与.php字符 ...

  5. Virtualbox EFI 写入startup.nsh

    安装好的Debian系统,重启后会因为找不到入口而无法启动.定位grubx64.efi文件,可用ls直接查找或一步一步查找ls fs0:\EFI\debian\grubx64.efi edit fs0 ...

  6. C盘满了

      今天电脑提示说C盘磁盘满了,于是开始做磁盘清理 右击C盘,点管理. 点击磁盘清理,勾选中临时文件.下载.回收站.缩略图,然后点击清理系统文件. 再去查看C盘仍然没有多大变化,于是挨个翻看C盘到底哪 ...

  7. 多线程事务回滚sqlSession, spring-mybatis 开启事务

    @Resource SqlContext sqlContext; /** * 多线程事务. * @param employeeDOList */ @Override public void saveT ...

  8. encodeURI和encodeURIComponent

    encodeURI和encodeURIComponent的作用对象都是URL,唯一的区别就是编码的字符范围: encodeURI不会对ascii字母.数字.~!@#$&*()=:/,;?+' ...

  9. vue - axios简单封装

    分析: (1)axios处理接口请求.可能需处理请求拦截,响应拦截,不同类型的请求,所以需要一个http.js文件 (2)请求都是基于相关环境的,所以需要一个url.js处理环境 (3)可根据不同模块 ...

  10. PyMySQL查询

    title: PyMySQL查询 author: 杨晓东 permalink: PyMySQL查询 date: 2021-10-02 11:27:04 categories: - 投篮 tags: - ...