组件间怎么通信？盘点Vue组件通信方式（值得收藏）

vue组件间怎么通信？本篇文章盘点vue2和vue3的10种组件通信方式，希望对大家有所帮助！

Vue中组件通信方式有很多，其中Vue2和Vue3实现起来也会有很多差异；本文将通过选项式API 组合式API以及setup三种不同实现方式全面介绍Vue2和Vue3的组件通信方式。其中将要实现的通信方式如下表所示。（学习视频分享：vue视频教程）

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一般在深层组件嵌套中使用合适。一般在组件开发中用的居多。

千问APP

阿里最强大模型官方AI助手

下载

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

（学习视频分享：web前端开发、编程基础视频）