[react]7、组件间数据传递

Posted 2023-04-12

参考技术A 1、参数的传递形式：
1）、父组件通过 属性=值 的形式来传递给子组件数据
2）、子组件通过 props 参数获取父组件传递过来的数据;

2、props传递源码分析
super(props)、将props传递给父组件

3、转换为ES5分析super的本质
es6console.com

4、props在组件中的赋值时机

通过源码分析

如果项目中默认继承了Flow或者TypeScript，那么直接就可以进行类型验证
但即使你不使用这些扩展，也可以通过React的内置 prop-types 库来进行参数验证

Vue父子组件间通信（数据传递）

参考技术A

父---props--->子
子---props/自定义事件/全局事件总线/消息订阅与发布--->父
任意组件间通信：/自定义事件/全局事件总线/消息订阅与发布/Vuex/路由传参

父组件传递：在使用子组件时，使用 v-bind：自定义接收名称="要传递的数据"
子组件接收： props:["自定义接收名称"]

父组件传递： v-on:自定义接收名称="要传递的方法"
子组件接收时自定义一个方法，在方法中触发父组件传递的方法： this.$emit("自定义接收名称")

在父组件向子组件 传递方法 的基础上，给方法 增加参数 ，
也就是在子组件中触发父组件的方法时： this.$emit("自定义接收名称"，需传递的数据) ，父组件中的方法也增加参数接收数据即可。

在父组件中使用子组件时，增加 ref属性并指定ref的名称 ，然后在调用方法的地方使用 this.refs.ref的名称.需调用的子组件方法名() 即可调用。
e.g.