Vue和React组件之间有哪些传值方式？

本文共计1002个文字，预计阅读时间需要5分钟。

在当前三大框架中，Vue和React的组件间传值方式有哪些？组件间传值方式包括：父子之间、兄弟之间、多层级之间（子孙或更多）。

在现代的三大框架中，其中两个Vue和React框架，组件间传值方式有哪些？

组件间的传值方式

组件的传值场景无外乎以下几种：

• 父子之间
• 兄弟之间
• 多层级之间（孙子祖父或者更多）
• 任意组件之间

父子之间

Vue

Vue是基于单项数据流设计的框架，但是提供了一些的语法，指令去实现一些操作

• 父->子：通过props进行传递数据给子组件
• 子->父：通过emit向父组件传值

同时，还有一些其他进行父子组件通信的方式，通过$parent和$children获取组件的父或者子组件的实例，之后通过实例对象去修改组件的属性。在表单控件中，使用v-model实现了双向数据绑定，其实这里v-model是一个语法糖，内部实现还是监听了表单控件的change事件，然后将数据传递给组件修改数据，从而实现了双向数据绑定。