一般我们会使用useContext和createContext来进行父子组件的传值官网

父组件

我们使用计数器作为父组件

function App() {const [count, setCount] = useState(0);return (<><div>次数:{count}</div><button onClick={() => {setCount(count + 1);}}>增加次数</button></>);
}

子组件

我们写一个子组件，用于展示count

function ShowCount(){return <div>{count}</div>
}

传值

创建上下文对象

我们需要在全局创建上下文对象

const CountContext = createContext(0)

父组件传值

<><div>次数:{count}</div><button onClick={() => {setCount(count + 1);}}>增加次数</button><CountContext.Provider value={count}><ShowCount/></CountContext.Provider>
</>

子组件接收值

  const count = useContext(CountContext)return <div>{count}</div>

当我们点击按钮的时候就会发现数据传过去了

ReachHooks之父子组件传值相关推荐

vue中父子组件先后渲染_vue父子组件传值（子传父，非父子组件传值）
1. 子组件向父组件传值子组件: <template><div>子组件:<span>{{childValue}}</span><!-- 定义一个 ...
在基于nuxt的移动端页面中引用mint UI的popup组件之父子组件传值
最近在做移动端的wap页面,考虑到要做SEO,所以选定了nuxt+vue+mint ui. 有一个需求是这样的,点击头部菜单栏,出现一个气泡,点击返回首页. 由于一些页面没有统一引用mint的mt-h ...
父子组建传值_浅谈Vue父子组件和非父子组件传值问题
本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue goodsList组件 expor ...
Vue 进阶组件实战应用 -- 父子组件传值的应用实例（子父组件传值的两种触发方式）
基础的子组件和父组件通信已经搞定了,可以看此博客父子组件传值基础应用需求现在需求是在一个父页面引用子组件,不只是要实现基本的父子组件传值.并且子组件给父组件传值的触发条件要在父页面触发. 目前小 ...
实战 | Element UI 父子组件传值与事件绑定（逆向）
这是小小本周的第四篇,本篇将会倒过来讲解Element UI 父子组件传值与事件绑定. 父子组件传值新建父组件和子组件新建父组件代码如下 <template><div id=& ...
实战 | Element UI 父子组件传值与事件绑定（正向）
这是小小的本周的第三篇,本篇将会讲解关于Element UI 父子组件传值与事件绑定. 父子组件传值新建父组件和子组件新建父组件代码如下 <template><div id=& ...
ionic 父子组件传值
ionic 父子组件传值一.父组件==>子组件传值父组件ts public parentVal="我是父组件的值"; 父组件html <child [parentV ...
vue父子组件传值之异步之后子组件无法拿到父组件传的值
在vue中父子组件传值是非常常见的,父组件给子组件传值使用的是props,子组件给父组件传值使用的是$emit 但是今天就不详细的介绍父子组件之间传值,在这里我们介绍的是子组件在异步请求回来的参数无法 ...
微信小程序父子组件传值问题
微信小程序父子组件传值问题把自己碰到的问题或者学到的东西在这里总结,慢慢积累在父子组件传值时,我发现子组件竟然拿不到父组件传过来的值. 我指的拿不到父组件的值,是指在子组件的生命周期created ...

ReachHooks之父子组件传值

父组件

子组件

传值

创建上下文对象

父组件传值

子组件接收值

ReachHooks之父子组件传值相关推荐

最新文章

热门文章