React后台管理（八）-- 开发页面前准备---插槽以及函数组件传值

文章目录

• 前言
• 一、插槽的使用
• • 1. 父组件结构如下
  • 2. 子组件接受插槽内容
• 二、父子函数组件传值
• • 1. 父组件传值给子组件
  • • （1）父组件定义属性传值给子组件
    • （2）子组件通过props去接收属性值
  • 2. 子组件传值父组件
  • • （1）父组件接收子组件的值，更新数据
    • （2）子组件通过方法，将值传出给父组件，类似vue的emit传值
  • 3. ref方式调用子组件方法等
  • • （1）子组件暴露方法
    • （2）父组件定义一个ref变量，以调用子组件暴露的方法
• 总结

前言

本文将着重将一下插槽，父子传值，以及ref调用子组件方法等。
（1）在react中，插槽又称slot-children,父组件可通过props传递内容给子组件，并在子组件中使用这些内容。
（2）另外，函数组件可通过props参数以及useImperativeHandle来实现父子组件间的传值。
（3）同时，我们还可使用ref来调用子组件的方法，类似于Vue中的ref。

一、插槽的使用

结构分析：
（1）父组件：定义不同slot的名字，这里设tabs，search，default为插槽名
（2）子组件：通过函数组件的props接收插槽的内容

1. 父组件结构如下

2. 子组件接受插槽内容

二、父子函数组件传值

结构分析：
（1）父组件传参给子组件（和vue一样）
（2）子组件向父组件传参
（3）父组件调用子组件方法等，通过ref即可

1. 父组件传值给子组件

（1）父组件定义属性传值给子组件

（2）子组件通过props去接收属性值

2. 子组件传值父组件

（1）父组件接收子组件的值，更新数据

（2）子组件通过方法，将值传出给父组件，类似vue的emit传值

3. ref方式调用子组件方法等

注：vue是通过子组件defineExpose暴露方法，加上父组件使用ref去获取

（1）子组件暴露方法

（2）父组件定义一个ref变量，以调用子组件暴露的方法

总结

下一篇讲【开发页面前准备—页面常用hook封装】。关注本栏目，将实时更新！