Vue2和Vue3的10种组件通信方式梳理

Vue中组件通信方式有很多，其中Vue2和Vue3实现起来也会有很多差异；本文将通过选项式API 组合式API以及setup三种不同实现方式全面介绍Vue2和Vue3的组件通信方式。

其中将要实现的通信方式如下表所示:

props

props是组件通信中最常用的通信方式之一。父组件通过v-bind传入，子组件通过props接收，下面是它的三种实现方式

选项式API：

//父组件  //子组件 

组合式Api:

//父组件  //子组件 

setup语法糖:

//父组件  //子组件 

注意：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：

//父组件  //子组件 

组合式API：

//父组件  //子组件 

setup语法糖：

//父组件  //子组件 

注意：通过ref获取子组件实例必须在页面挂载完成后才能获取。

在使用setup语法糖时候，子组件必须元素或方法暴露出去父组件才能获取到

EventBus/mitt

兄弟组件通信可以通过一个事件中心EventBus实现，既新建一个Vue实例来进行事件的监听，触发和销毁。

在Vue3中没有了EventBus兄弟组件通信，但是现在有了一个替代的方案mitt.js，原理还是 EventBus

选项式API：

//组件1  //组件2  //bus.js import Vue from "vue" export default new Vue()

组合式API：

首先安装mitt

npm i mitt -S

然后像Vue2中bus.js一样新建mitt.js文件

mitt.js

import mitt from 'mitt' const Mitt = mitt() export default Mitt

//组件1  //组件2 

• setup语法糖

//组件1  //组件2 

写在最后

其实组件还可以借助Vuex或者Pinia状态管理工具进行通信(但是组件之间的通信一般不建议这样做,因为这样就会出现组件不能复用的问题)。对于Vuex和Pinia的用法大家可以参考这篇文章文详解Pinia和Vuex与两个Vue状态管理模式

到此这篇关于Vue2和Vue3的10种组件通信方式梳理的文章就介绍到这了,更多相关Vue组件通信内容请搜索0133技术站以前的文章或继续浏览下面的相关文章希望大家以后多多支持0133技术站！