总结Vue3的11种传参通信方式，非常齐全

在Vue3中，组件间通信是一个常见的需求。以下是Vue3中传参的11种方式：

1. Props / Emits

父组件通过props向子组件传递数据，子组件通过emits向父组件发送事件。

父组件：

<template>
  <ChildComponent :parentData="parentData" @childEvent="parentMethod" />
</template>
 
<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'
 
const parentData = ref('some data')
 
const parentMethod = (eventData) => {
  console.log(eventData)
}
</script>

子组件：

<template>
  <button @click="$emit('childEvent', 'event data')">Click me</button>
</template>
 
<script setup>
import { defineProps } from 'vue'
 
const props = defineProps({
  parentData: String
})
</script>

2. Provide / Inject

父组件提供数据，子组件注入数据来接收。

父组件：

<template>
  <ChildComponent />
</template>
 
<script setup>
import { provide } from 'vue'
import ChildComponent from './ChildComponent.vue'
 
provide('parentData', 'some data')
</script>

子组件：

<template>
  <div>{{ parentData }}</div>
</template>
 
<script setup>
import { inject } from 'vue'
 
const parentData = inject('parentData')
</script>

3. Vuex

状态管理库Vuex管理全局状态。

// store.js
import { createStore } from 'vuex'
 
export default createStore({
  state: {
    globalData: 'some data'
  },
  mutations: {
    updateData(state, newData) {
      state.globalData = newData
    }
  }
})

4. Composition API

使用Vue3的Composition API进行状态管理。

import { reactive, toRefs } from 'vue'
 
export const useGlobalData = () => {
  const state = reactive({
    globalData: 'some data'
  })
 
  return toRefs(state)
}

5. Global Event Bus

创建一个全局事件总线，用于跨组件通信。

// event-bus.js
import { Vue } from 'vue-class-component'
 
const EventBus = new Vue({})
 
export default EventBus

6. $attrs / $listeners

$attrs可以获取父组件传递给子组件的非 prop 属性，$listeners可以获取父组件监听的事件。

父组件：

<template>
  <ChildComponent extraProp="extra" @extraEvent="handleExtraEvent" />
</template>
 
<script setup>
import ChildComponent from './ChildComponent.vue'
 
const handleExtraEvent = () => {
  console.log('Extra event triggered')
}
</script>

子组件：

<template>
  <div>
    <span>{{ $attrs.extraProp }}</span>
    <button @click="$emit('extraEvent')">Click me</button