简介
Vue和React是目前前端最火的两个框架。不管是面试还是工作可以说是前端开发者们都必须掌握的。
今天我们通过对比的方式来学习Vue和React的组件传值这一部分。
本文首先讲述Vue2、Vue3、React的组件传值方式，然后具体介绍了每种传值的应用场景以及具体的使用。最后对比总结了Vue和React在组件传值这部分的相同点和不同点。
希望通过这种对比方式的学习能让我们学习的时候印象更深刻，希望能够帮助到大家。
Vue2
Vue2 组件通信共有12种
props
$emit / v-on
.sync
v-model
ref
$children / $parent
$attrs / $listeners
provide / inject
EventBus
Vuex
$root
slot
应用场景
Vue2 组件通信方式虽然有很多种，但是不同方式有不同的应用场景。
父子组件通信
props
$emit / v-on
$attrs / $listeners
ref
.sync
v-model
$children / $parent
slot
兄弟组件通信
EventBus
Vuex
$parent
跨层级组件通信
provide/inject
EventBus
Vuex
$attrs / $listeners
$root
具体使用
props
props用于父组件向子组件传送数据。
子组件接收到数据之后，不能直接修改父组件的数据。会报错。
当需要修改props的时候应该在父组件修改。父组件修改后子组件会同步渲染。
如果子组件内一定要修改props的话推荐使用 computed，计算一个新属性给子组件使用，而不是直接修改。
// 父组件<template> <child :msg="msg"></child></template>// 子组件<template> <div>{{msg}}</div></template><script>export default { // 写法一 用数组接收 props:['msg'], // 写法二 用对象接收 props: { msg: String }, // 写法三 用对象接收，可以限定接收的数据类型、设置默认值、验证等 props:{ msg:{ type:String, default:'这是默认数据', // 必传 required: true } }, props: { user:{ type: Object, // 对象或数组默认值必须从一个工厂函数获取 default: () => return {}, // 自定义验证 validator: () => { return true/false } } }}</script>$emit / v-on
我们知道Vue是单向数据流，父组件传递给子组件的数据是不能直接修改的。
所以子组件想要修改父组件数据的时候需要先暴露事件并传递值给父组件，父组件监听该事件来完成值的修改。
// 子组件<template> <div> <div>{{ msg }}</div> <button @click="handleClick">change</button> </div></template><script>export default { props: ["msg"], methods: { handleClick() { const newMsg = "我被修改了"; this.$emit("changeMsg", newMsg); }, },};</script>// 父组件<template> <child :msg="msg" v-on:changeMsg="handleChangeMsg" ></child></template><script>export default { data() { return {msg: "我会传递给子组件"} }, methods:{ handleChangeMsg(newMsg){ this.msg = newMsg } }}</script>.sync
需要修改父组件传递过来的属性的值，每次都需要暴露一个方法过去，然后在父组件监听然后再修改，是不是感觉特别麻烦。
.sync就是用来简化这一过程的。
// 子组件<template> <div> <div>{{ msg }}</div> <button @click="handleClick">change</button> </div></template><script>export default { props: ["msg"], methods: { handleClick() { const newMsg = "我被修改了"; this.$emit("update:msg", newMsg); }, },};</script>// 父组件<template> <child :msg.sync="msg"></child></template><script>export default { data() { return {msg: "我会传递给子组件"} },}</script>父组件不需要再监听事件然后修改值了。
父组件只需要在传递属性的时候加上.sync修饰符，然后子组件再修改完值的时候暴露update:属性名的事件就可以啦。
v-model
.sync我们知道，是用来简化数据修改的，那还有没有更简单的方法呢？有，那就是v-model
v-model默认传递名为value的属性，并自动监听input事件。
我们来看个例子
// 子组件<template> <div> <input type="text" :value="value" @input="handleInput" /> </div></template><script>export default { props: { value: String, }, methods: { handleInput(e) { this.$emit("input", e.target.value); }, },};</script>// 父组件<template> <div>{{msg}}</div> <child v-model="msg"></child></template><script>export default { data() { return {msg: "我会传递给子组件"} },}在上面的例子中，我们input框默认值是我会传递给子组件，当我们修改input框值的时候父组件值也会变。这其实就是双向绑定。
但有时候我们不可能就一直传递属性为value，然后监听input事件，这显示不满足我们的需求。
需要修改属性和事件怎么办呢？这就需要用到我们的model参数了。该属性定义在子组件。包含两个属性，prop用来定义属性名，event用来定义事件名。
比如我们想传递过来的属性名为customValue，监听的事件为customInput。
// 子组件<template> <div> <input type="text" :value="customValue" @input="handleInput" /> </div></template><script>export default { model: { prop: "customValue", event: "customInput", }, props: { customValue: String, }, methods: { handleInput(e) { this.$emit("customInput", e.target.value); }, },};</script>// 父组件<template> <div>{{msg}}</div> <child v-model="msg"></child></template><script>export default { data() { return {msg: "我会传递给子组件"} },}其它的事件或者属性类似，这里笔者就不再赘述了。但是需要注意一个组件只能使用一个v-model。
ref
如果需要直接操作子组件我们就可以使用ref了。
ref 如果在普通的DOM元素上，引用指向的就是该DOM元素;
如果在子组件上，引用的指向就是子组件实例。
// 子组件<template> <div> <div>{{ msg }}</div> </div></template><script>export default { props: ["msg"], data() { return { name: "child6", }; }, methods: { say() { console.log("say child6"); }, }, computed: { title() { return this.name + "title"; }, },};</script>// 父组件<template> <child :msg="msg" ref="childRef"></child></template><script>export default { data() { return {msg: "我会传递给子组件"} }, mounted() { // 通过$refs获取子组件 console.log(this.$refs.childRef) // 接下来我们就可以直接操作子组件了 console.log(this.$refs.childRef.$data) console.log(this.$refs.childRef.$props) console.log(this.$refs.childRef.$el) this.$refs.childRef.say() console.log(this.$refs.childRef.name) console.log(this.$refs.childRef.title) // ... }}需要注意，如果ref定义在循环中，this.$refs.xxx会是一个数组。
$children / $parent
类似ref，我们可以通过$children / $parent直接获取到子组件或父组件。
$children：获取到一个包含所有子组件(不包含孙子组件)的 VueComponent 对象数组，可以直接拿到子组件中所有数据和方法。
$parent：获取到一个父节点的 VueComponent 对象，同样包含父节点中所有数据和方法。
// 父组件export default{ mounted(){ this.$children[0].someMethod() // 调用第一个子组件的someMethod this.$children[0].name // 获取第一个子组件中的name属性 }}// 子组件export default{ mounted(){ this.$parent.someMethod() // 调用父组件的someMethod this.$parent.name // 获取父组件中的name属性 }}$root
和$children / $parent相似，$root 可以获取到根实例里。
也就是我们main.js创建的Vue实例
new Vue({ router, store, render: (h) => h(App), data: { name: "根组件", },}).$mount("#app");provide / inject
provide / inject需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。如果你熟悉 React，这与 React 的context特性很相似。
provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 property。
inject 选项应该是：
一个字符串数组，或
一个对象，对象的 key 是本地的绑定名，value 是：
from property 是在可用的注入内容中搜索用的 key (字符串或 Symbol)
default property 是降级情况下使用的 value
在可用的注入内容中搜索用的 key (字符串或 Symbol)，或
一个对象，该对象的：
提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。
// 父级组件提供 'foo'var Provider = { provide: { foo: 'bar' }, // ...}// 后代组件注入 'foo'var Child = { inject: ['foo'], created () { console.log(this.foo) // => "bar" } // ...}在 2.5.0+ 的注入可以通过设置默认值使其变成可选项：
const Child = { inject: { foo: { default: 'foo' } }}如果它需要从一个不同名字的 property 注入，则使用 from 来表示其源 property：
// 子组件<template> <div> <div>{{ msg }}</div> <button @click="handleClick">change</button> </div></template><script>export default { props: ["msg"], methods: { handleClick() { const newMsg = "我被修改了"; this.$emit("changeMsg", newMsg); }, },};</script>// 父组件<template> <child :msg="msg" v-on:changeMsg="handleChangeMsg" ></child></template><script>export default { data() { return {msg: "我会传递给子组件"} }, methods:{ handleChangeMsg(newMsg){ this.msg = newMsg } }}</script>0与 prop 的默认值类似，你需要对非原始值使用一个工厂方法：
// 子组件<template> <div> <div>{{ msg }}</div> <button @click="handleClick">change</button> </div></template><script>export default { props: ["msg"], methods: { handleClick() { const newMsg = "我被修改了"; this.$emit("changeMsg", newMsg); }, },};</script>// 父组件<template> <child :msg="msg" v-on:changeMsg="handleChangeMsg" ></child></template><script>export default { data() { return {msg: "我会传递给子组件"} }, methods:{ handleChangeMsg(newMsg){ this.msg = newMsg } }}</script>1$attrs / $listeners
多层嵌套组件传递数据时，如果只是传递数据，而不做中间处理的话就可以用$attrs / $listeners，比如父组件向孙子组件传递数据时。
$attrs包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)。
$listeners包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。
可能有些小伙伴不懂，下面举个例子就明白了
// 子组件<template> <div> <div>{{ msg }}</div> <button @click="handleClick">change</button> </div></template><script>export default { props: ["msg"], methods: { handleClick() { const newMsg = "我被修改了"; this.$emit("changeMsg", newMsg); }, },};</script>// 父组件<template> <child :msg="msg" v-on:changeMsg="handleChangeMsg" ></child></template><script>export default { data() { return {msg: "我会传递给子组件"} }, methods:{ handleChangeMsg(newMsg){ this.msg = newMsg } }}</script>2slot
slot 可以用在父组件直接向子组件传递内容。我们在子组件标签内的内容都可以传递过去。
没命名的slot默认名称是default。
// 子组件<template> <div> <div>{{ msg }}</div> <button @click="handleClick">change</button> </div></template><script>export default { props: ["msg"], methods: { handleClick() { const newMsg = "我被修改了"; this.$emit("changeMsg", newMsg); }, },};</script>// 父组件<template> <child :msg="msg" v-on:changeMsg="handleChangeMsg" ></child></template><script>export default { data() { return {msg: "我会传递给子组件"} }, methods:{ handleChangeMsg(newMsg){ this.msg = newMsg } }}</script>3不单父组件传递内容给子组件，子组件还可以通过作用域插槽传递数据给父组件。
// 子组件<template> <div> <div>{{ msg }}</div> <button @click="handleClick">change</button> </div></template><script>export default { props: ["msg"], methods: { handleClick() { const newMsg = "我被修改了"; this.$emit("changeMsg", newMsg); }, },};</script>// 父组件<template> <child :msg="msg" v-on:changeMsg="handleChangeMsg" ></child></template><script>export default { data() { return {msg: "我会传递给子组件"} }, methods:{ handleChangeMsg(newMsg){ this.msg = newMsg } }}</script>4顺便说一说this.$slots和this.$scopedSlots。
this.$slots
this.$slots用来访问被插槽分发的内容。每个具名插槽有其相应的 property (例如：v-slot:foo 中的内容将会在 vm.$slots.foo 中被找到)。default property 包括了所有没有被包含在具名插槽中的节点，或 v-slot:default 的内容。
每个属性包含一个VNode的数组。
请注意插槽不是响应性的。如果你需要一个组件可以在被传入的数据发生变化时重渲染，我们建议改变策略，依赖诸如 props 或 data 等响应性实例选项。
this.$scopedSlots
this.$scopedSlots用来访问作用域插槽。对于包括 默认 slot 在内的每一个插槽，该对象都包含一个返回相应 VNode 的函数。
我们通过调用对应的方法，传递响应的数据，就能得到VNode数组。类似this.$slots的返回值。
// 子组件<template> <div> <div>{{ msg }}</div> <button @click="handleClick">change</button> </div></template><script>export default { props: ["msg"], methods: { handleClick() { const newMsg = "我被修改了"; this.$emit("changeMsg", newMsg); }, },};</script>// 父组件<template> <child :msg="msg" v-on:changeMsg="handleChangeMsg" ></child></template><script>export default { data() { return {msg: "我会传递给子组件"} }, methods:{ handleChangeMsg(newMsg){ this.msg = newMsg } }}</script>5就类似于前面的，不过有$scopedSlots，$slots就不会有值了。
// 子组件<template> <div> <div>{{ msg }}</div> <button @click="handleClick">change</button> </div></template><script>export default { props: ["msg"], methods: { handleClick() { const newMsg = "我被修改了"; this.$emit("changeMsg", newMsg); }, },};</script>// 父组件<template> <child :msg="msg" v-on:changeMsg="handleChangeMsg" ></child></template><script>export default { data() { return {msg: "我会传递给子组件"} }, methods:{ handleChangeMsg(newMsg){ this.msg = newMsg } }}</script>6EventBus
EventBus主要利用了Vue实例 $on、$once、$off、$emit这四个方法来进行数据的传递。
首先我们定义一个EventBus
// 子组件<template> <div> <div>{{ msg }}</div> <button @click="handleClick">change</button> </div></template><script>export default { props: ["msg"], methods: { handleClick() { const newMsg = "我被修改了"; this.$emit("changeMsg", newMsg); }, },};</script>// 父组件<template> <child :msg="msg" v-on:changeMsg="handleChangeMsg" ></child></template><script>export default { data() { return {msg: "我会传递给子组件"} }, methods:{ handleChangeMsg(newMsg){ this.msg = newMsg } }}</script>7// 子组件<template> <div> <div>{{ msg }}</div> <button @click="handleClick">change</button> </div></template><script>export default { props: ["msg"], methods: { handleClick() { const newMsg = "我被修改了"; this.$emit("changeMsg", newMsg); }, },};</script>// 父组件<template> <child :msg="msg" v-on:changeMsg="handleChangeMsg" ></child></template><script>export default { data() { return {msg: "我会传递给子组件"} }, methods:{ handleChangeMsg(newMsg){ this.msg = newMsg } }}</script>8Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
这个笔者就不多说了，大家应该都知道，不知道的可以查看Vue2版本官方文档自行学习。
Vue3
Vue3组件通讯有9中
props
emit
ref / expose
attrs
v-model
provide / inject
mitt
Vuex
Pinia
应用场景
Vue3 组件通信方式虽然有很多种，但是不同方式有不同的应用场景。
父子组件通信
props
emit
attrs
ref / expose
v-model
兄弟组件通信
mitt
Vuex
Pinia
跨层级组件通信
provide/inject
attrs
mitt
Vuex
Pinia
具体使用
props
props用于父组件向子组件传值，使用方式和vue2没什么差别。
// 子组件<template> <div> <div>{{ msg }}</div> <button @click="handleClick">change</button> </div></template><script>export default { props: ["msg"], methods: { handleClick() { const newMsg = "我被修改了"; this.$emit("changeMsg", newMsg); }, },};</script>// 父组件<template> <child :msg="msg" v-on:changeMsg="handleChangeMsg" ></child></template><script>export default { data() { return {msg: "我会传递给子组件"} }, methods:{ handleChangeMsg(newMsg){ this.msg = newMsg } }}</script>9emit
emit和vue2的$emit使用方式是一样的，但是需要注意:
vue3中，emit是在setup函数的第二个参数上。
vue3中，子组件暴露的方法需要在emits定义。
// 子组件<template> <div> <div>{{ msg }}</div> <button @click="handleClick">change</button> </div></template><script>export default { props: ["msg"], methods: { handleClick() { const newMsg = "我被修改了"; this.$emit("update:msg", newMsg); }, },};</script>// 父组件<template> <child :msg.sync="msg"></child></template><script>export default { data() { return {msg: "我会传递给子组件"} },}</script>0ref / expose
vue3中定义ref需要使用ref()定义。
使用的时候需要注意：
当组件没定义expose暴露内容的时候，通过ref获取到的就是组件自身的内容，也就是setup函数return的内容。
当定义了expose暴露内容的时候，通过ref获取到的就是组件expose暴露内容，并且setup函数return的内容会失效，也就是会被覆盖。
// 子组件<template> <div> <div>{{ msg }}</div> <button @click="handleClick">change</button> </div></template><script>export default { props: ["msg"], methods: { handleClick() { const newMsg = "我被修改了"; this.$emit("update:msg", newMsg); }, },};</script>// 父组件<template> <child :msg.sync="msg"></child></template><script>export default { data() { return {msg: "我会传递给子组件"} },}</script>1attrs
在vue2中，我们知道this.$attrs包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。
在vue3中有了更改，attrs被转移到setup的第二个参数context上，context.attrs。并且class 和 style也都不再忽略了。也就是说class 和 style也会在attrs里面。
使用方式和vue2还是一样的，多层嵌套组件传递数据时，如果只是传递数据，而不做中间处理的话就可以用attrs，比如父组件向孙子组件传递数据时。
// 子组件<template> <div> <div>{{ msg }}</div> <button @click="handleClick">change</button> </div></template><script>export default { props: ["msg"], methods: { handleClick() { const newMsg = "我被修改了"; this.$emit("update:msg", newMsg); }, },};</script>// 父组件<template> <child :msg.sync="msg"></child></template><script>export default { data() { return {msg: "我会传递给子组件"} },}</script>2v-model
vue3的v-model我们只需要注意两点：
在vue2中，一个组件只能绑定一个v-model，但是vue3中可以绑定多个。
在vue2中如果不指明model属性，那么它的值默认是value，事件默认是input事件。但是在vue3中不需要model属性了，并且它的值默认是modelValue，事件默认是update:modelValue事件。
// 子组件<template> <div> <div>{{ msg }}</div> <button @click="handleClick">change</button> </div></template><script>export default { props: ["msg"], methods: { handleClick() { const newMsg = "我被修改了"; this.$emit("update:msg", newMsg); }, },};</script>// 父组件<template> <child :msg.sync="msg"></child></template><script>export default { data() { return {msg: "我会传递给子组件"} },}</script>3如果不想用默认名，我们可以在v-model:后面加上自定义的名字。
provide / inject
provide / inject需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。
原理和vue2一样，可能就是方法有所改变。
// 子组件<template> <div> <div>{{ msg }}</div> <button @click="handleClick">change</button> </div></template><script>export default { props: ["msg"], methods: { handleClick() { const newMsg = "我被修改了"; this.$emit("update:msg", newMsg); }, },};</script>// 父组件<template> <child :msg.sync="msg"></child></template><script>export default { data() { return {msg: "我会传递给子组件"} },}</script>4上面的写法是setup的语法糖写法，更简洁，小伙伴不要陌生哦。
mitt
我们知道vue3去除了$on $once $off方法，所以没办法再使用 EventBus 跨组件通信了。但是现在有了一个替代的方案 mitt.js，原理还是 EventBus。
先安装 npm i mitt -S
然后像以前封装 bus 一样，封装一下
// 子组件<template> <div> <div>{{ msg }}</div> <button @click="handleClick">change</button> </div></template><script>export default { props: ["msg"], methods: { handleClick() { const newMsg = "我被修改了"; this.$emit("update:msg", newMsg); }, },};</script>// 父组件<template> <child :msg.sync="msg"></child></template><script>export default { data() { return {msg: "我会传递给子组件"} },}</script>5然后两个组件之间通信的使用
// 子组件<template> <div> <div>{{ msg }}</div> <button @click="handleClick">change</button> </div></template><script>export default { props: ["msg"], methods: { handleClick() { const newMsg = "我被修改了"; this.$emit("update:msg", newMsg); }, },};</script>// 父组件<template> <child :msg.sync="msg"></child></template><script>export default { data() { return {msg: "我会传递给子组件"} },}</script>6Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
这个笔者就不多说了，大家应该都知道，不知道的可以查看Vue3版本官方文档自行学习。
Pinia
如果你之前使用过 vuex 进行状态管理的话，那么 pinia 就是一个类似的插件。它是最新一代的轻量级状态管理插件。按照尤雨溪的说法，vuex 将不再接受新的功能，建议将 Pinia 用于新的项目。
这个笔者就不多说了，大家可以自行查看官方文档进行学习。
React
React组件通讯有7中
props
context
ref
children
EventEmitter
Redux
Mobx
React 组件通信方式虽然有很多种，但是不同方式有不同的应用场景。
应用场景
父子组件通信
props
context
ref
children
兄弟组件通信
EventEmitter
Redux
跨层级组件通信
context
EventEmitter
Redux
具体使用
props
props用于父组件向子组件传值，可以传递属性或者方法甚至组件。
// 子组件<template> <div> <div>{{ msg }}</div> <button @click="handleClick">change</button> </div></template><script>export default { props: ["msg"], methods: { handleClick() { const newMsg = "我被修改了"; this.$emit("update:msg", newMsg); }, },};</script>// 父组件<template> <child :msg.sync="msg"></child></template><script>export default { data() { return {msg: "我会传递给子组件"} },}</script>7我们可以发现，在react中子组件向父组件传递消息是通过回调函数的方式，也就是父组件把方法以props的形式传递给子组件来调用。这一块和vue还是有很大差别的。
context
context上下文，用于父子或子孙组件之间通信，类似 vue 的 provide/inject
// 子组件<template> <div> <div>{{ msg }}</div> <button @click="handleClick">change</button> </div></template><script>export default { props: ["msg"], methods: { handleClick() { const newMsg = "我被修改了"; this.$emit("update:msg", newMsg); }, },};</script>// 父组件<template> <child :msg.sync="msg"></child></template><script>export default { data() { return {msg: "我会传递给子组件"} },}</script>8可以看到 context 使用方式有很多种。传递单个context使用哪种方式都可以，但是当传递多个context的时候只能使用Consumer的方式。使用Consumer嵌套可以获取多个context。这里笔者就不再细说了。
ref
通过ref可以获取到子组件实例，然后使用组件上的属性或方法，这个和vue是类似的。
// 子组件<template> <div> <div>{{ msg }}</div> <button @click="handleClick">change</button> </div></template><script>export default { props: ["msg"], methods: { handleClick() { const newMsg = "我被修改了"; this.$emit("update:msg", newMsg); }, },};</script>// 父组件<template> <child :msg.sync="msg"></child></template><script>export default { data() { return {msg: "我会传递给子组件"} },}</script>9创建ref的方式有createRef useRef和回调函数的方式。但是有一点我们需要注意，你不能在函数组件上使用 ref 属性，因为它们没有实例。如果想要获取函数式组件的ref，需要使用forwardRef并配合useImperativeHandle才能使用。这里笔者就不细说了。
children
在react中，写在组件中的内容都是children，类似vue里面的插槽slot。
根据插入内容的多少children可能是一个数组也可能是一个对象。当只有一个内容的时候是一个对象，当有多个内容的时候是一个数组。
// 子组件<template> <div> <input type="text" :value="value" @input="handleInput" /> </div></template><script>export default { props: { value: String, }, methods: { handleInput(e) { this.$emit("input", e.target.value); }, },};</script>// 父组件<template> <div>{{msg}}</div> <child v-model="msg"></child></template><script>export default { data() { return {msg: "我会传递给子组件"} },}0当props和插槽同时存在的时候，插槽为准。
// 子组件<template> <div> <input type="text" :value="value" @input="handleInput" /> </div></template><script>export default { props: { value: String, }, methods: { handleInput(e) { this.$emit("input", e.target.value); }, },};</script>// 父组件<template> <div>{{msg}}</div> <child v-model="msg"></child></template><script>export default { data() { return {msg: "我会传递给子组件"} },}1EventEmitter
react并不支持自定义事件，所以没有vue的$on $off $emit $once等方法。所以需要借助外部插件。
EventEmitter 就是一种，类似mitt。
// 子组件<template> <div> <input type="text" :value="value" @input="handleInput" /> </div></template><script>export default { props: { value: String, }, methods: { handleInput(e) { this.$emit("input", e.target.value); }, },};</script>// 父组件<template> <div>{{msg}}</div> <child v-model="msg"></child></template><script>export default { data() { return {msg: "我会传递给子组件"} },}2Redux
Redux是一个状态管理工具，类似 vuex，可以自行查看官方文档学习。
Mobx
Mobx是一个状态管理工具，类似 Redux，可以自行查看官方文档学习。
对比总结
相同点
都支持父子、兄弟、跨层级通信。
都推崇单向数据流，子组件不能直接修改父组件传递过来的数据。
都支持自定义事件来通信，比如Vue的EventBus、mitt，React的EventEmitter。
都支持通过ref获取子组件实例来操作子组件。
都支持通过插槽的方式直接传递数据。
都有各自的状态管理库，Vue的vuex、pinia，React的redux、mobx。
不同点
在Vue中，子组件如果需要修改父组件数据，需要暴露方法，父组件监听该方法，然后修改数据。但是在React中，是通过属性传递回调函数给子组件调用的方式来修改的。
React的ref相较于Vue使用方式更多并且更强大。可以通过创建和回调的方式创建ref。并且在获取元素方面，不但能获取子组件，还能通过ref转发获取到子组件的DOM元素。
React的插槽相较于Vue稍微逊色一点点，没有具名插槽、作用域插槽那么多种类，都是通过children作为插槽传递内容进行通讯。
系列文章
Vue和React对比学习之生命周期函数(Vue2、Vue3、老版React、新版React)
后记
感谢小伙伴们的耐心观看，本文为笔者个人学习笔记，如有谬误，还请告知，万分感谢！如果本文对你有所帮助，还请点个关注点个赞~，您的支持是笔者不断更新的动力！
原文：https://juejin.cn/post/7101869216596230152