vue 组件的常见8种通信方式

1、通过props传递‌，emit触发自定义事件：

父传子：子组件中通过props接收父组件传递的数据。

‌子传父：子组件通过emit触发一个事件，父组件监听这个事件来接收数据。

vue2：通过props和$emit

vue3：script中setup，自带defineProps，defineEmits

2.provide/inject‌：

provide和inject可以实现跨级组件的数据传递。provide在祖先组件中提供数据，inject在后代组件中注入数据‌。

3‌、使用ref‌子传父：

父组件可以通过$refs直接访问子组件的实例，从而调用子组件的方法或访问其数据。

Vue 2中，如果你想要通过$refs访问子组件的某个方法或数据，你不需要特别做任何事情来暴露它们。只要在子组件中定义了方法或者数据，你就可以直接通过this.$refs.yourRefName.methodOrProperty访问这些方法或属性

Vue 3中，需要在子组件中使用defineExpose函数来显式地暴露它们，在父组件定义ref变量并绑定到模板中。这是因为默认情况下，使用setup定义的所有局部变量和函数都是私有的，不会被父组件通过$refs访问到。也可以像 Vue 2 那样使用，但是在Options API（ setup()）中

 

//点击传值
<Vue ref="val"/>//引入子组件，使用ref调用该子组件 const val = ref()//定义变量 const p1 = reactive({name:'马云',age:52}) function btn(){ val.value.receive(p1) }

 

4‌、EventBus（全局事件总线）‌：

通过创建一个事件总线，实现非父子关系的组件之间的通信。这种方式适用于兄弟组件或跨多级的组件通信‌。

‌5、Vuex‌：

Vuex是一个状态管理库，适用于大型应用中组件间的状态管理。通过改变状态来通知其他组件更新‌。

6‌、插槽（Slots）‌：

插槽用于父组件向子组件插入内容，也可以用于子组件向父组件传递数据‌。

7‌、路由传参‌：

通过路由的params和query参数进行组件间的数据传递。这种方式适用于通过路由进行的数据传递‌。

8‌、attrs/listeners‌：

attrs用于父传子，子传孙的情况；listeners用于孙传子的反向通信。这种方式适用于祖先与后代组件之间的数据传递‌。