您现在的位置是：网站首页> 编程资料编程资料
Vue2和Vue3的10种组件通信方式梳理_vue.js_
2023-05-24
422人已围观
简介 Vue2和Vue3的10种组件通信方式梳理_vue.js_
Vue中组件通信方式有很多，其中Vue2和Vue3实现起来也会有很多差异；本文将通过选项式API 组合式API以及setup三种不同实现方式全面介绍Vue2和Vue3的组件通信方式。
其中将要实现的通信方式如下表所示:
| 方式 | Vue2 | Vue3 |
|---|---|---|
| 父传子 | props | props |
| 子传父 | $emit | emits |
| 父传子 | $attrs | attrs |
| 子传父 | $listeners | 无(合并到 attrs方式) |
| 父传子 | provide/inject | provide/inject |
| 子组件访问父组件 | $parent | 无 |
| 父组件访问子组件 | $children | 无 |
| 父组件访问子组件 | $ref | expose&ref |
| 兄弟传值 | EventBus | mitt |
props
props是组件通信中最常用的通信方式之一。父组件通过v-bind传入，子组件通过props接收，下面是它的三种实现方式
选项式API：
//父组件//子组件{{msg}}
组合式Api:
//父组件//子组件{{ parentMsg }}
setup语法糖:
//父组件//子组件{{ parentMsg }}
注意：props中数据流是单项的，即子组件不可改变父组件传来的值
在组合式API中，如果想在子组件中用其它变量接收props的值时需要使用toRef将props中的属性转为响应式。
emit
子组件可以通过emit发布一个事件并传递一些参数，父组件通过v-on进行这个事件的监听
选项式API:
//父组件// 子组件
组合式Api:
//父组件//子组件
setup语法糖:
//父组件//子组件
attrs和listeners
子组件使用$attrs可以获得父组件除了props传递的属性和特性绑定属性 (class和 style)之外的所有属性。
子组件使用$listeners可以获得父组件(不含.native修饰器的)所有v-on事件监听器，在Vue3中已经不再使用；但是Vue3中的attrs不仅可以获得父组件传来的属性也可以获得父组件v-on事件监听器
选项式API:
//父组件//子组件
组合式API:
//父组件//子组件
setup语法糖:
//父组件//子组件
注意：Vue3中使用attrs调用父组件方法时，方法前需要加上on；如parentFun->onParentFun
provide/inject
provide：是一个对象，或者是一个返回对象的函数。里面包含要给子孙后代属性
inject：一个字符串数组，或者是一个对象。获取父组件或更高层次的组件provide的值，既在任何后代组件都可以通过inject获得
选项式API:
//父组件 //子组件
组合式API:
//父组件 //子组件
- setup语法糖
//父组件 //子组件
说明;provide/inject一般在深层组件嵌套中使用合适。一般在组件开发中用的居多。
parent/children
$parent: 子组件获取父组件Vue实例，可以获取父组件的属性方法等
$children: 父组件获取子组件Vue实例，是一个数组，是直接儿子的集合，但并不保证子组件的顺序
Vue2：
import Child from './Child' export default { components: { Child }, created(){ console.log(this.$children) //[Child实例] console.log(this.$parent)//父组件实例 } }注意 父组件获取到的$children并不是响应式的
expose&ref
$refs可以直接获取元素属性，同时也可以直接获取子组件实例
选项式API：
//父组件