在Vue3中，组件间通信是一个常见的需求。以下是Vue3中传参的11种方式：
- 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>
- 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>
- Vuex
状态管理库Vuex管理全局状态。
// store.js
import { createStore } from 'vuex'
export default createStore({
state: {
globalData: 'some data'
},
mutations: {
updateData(state, newData) {
state.globalData = newData
}
}
})
- Composition API
使用Vue3的Composition API进行状态管理。
import { reactive, toRefs } from 'vue'
export const useGlobalData = () => {
const state = reactive({
globalData: 'some data'
})
return toRefs(state)
}
- Global Event Bus
创建一个全局事件总线，用于跨组件通信。
// event-bus.js
import { Vue } from 'vue-class-component'
const EventBus = new Vue({})
export default EventBus
- $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