vue3传参调用方法
在Vue 3中，组件之间的通信是一个常见的需求，无论是父组件向子组件传递数据，还是子组件向父组件发送消息，都需要通过合理的方式进行参数传递和方法调用。介绍几种常见的 Vue 3 传参及调用方法的解决方案，并提供详细的代码示例。
开头解决方案
Vue 3 提供了多种方式来实现组件间的通信和方法调用。最常用的方式包括：
- Props + Emit：父组件通过
props向子组件传递数据，子组件通过$emit触发父组件的方法。 - Provide / Inject：用于跨层级组件之间的数据共享。
- 事件总线（Event Bus）：适用于非父子关系的组件间通信（虽然官方不推荐，但在某些场景下仍然适用）。
- Vuex 或 Pinia：对于复杂的状态管理，使用全局状态管理库是更好的选择。
接下来我们将这几种方式的具体实现。
一、Props + Emit
这是最常见也是最简单的父子组件通信方式。父组件通过 props 向子组件传递数据，而子组件可以通过 $emit 触发父组件的方法。
父组件代码：
vue
<div>
</div>
</p>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'
const parentMessage = ref('Hello from Parent')
const handleChildEvent = (data) => {
console.log('Child component emitted:', data)
}
<p>子组件代码：
vue
<div>
<p>{{ message }}</p>
<button>Send Data to Parent</button>
</div>
</p>
defineProps(['message'])
const emit = defineEmits(['child-event'])
const sendDataToParent = () => {
emit('child-event', 'Hello from Child')
}
<p>二、Provide / Inject
provide 和 inject 是一种更灵活的组件通信方式，适用于跨层级组件之间的数据共享。
父组件代码：
vue
<div>
</div>
</p>
import { provide, ref } from 'vue'
import ChildComponent from './ChildComponent.vue'
const sharedData = ref('Shared Data from Parent')
provide('sharedData', sharedData)
<p>子组件代码：
vue
<div>
<p>{{ injectedData }}</p>
</div>
</p>
import { inject } from 'vue'
const injectedData = inject('sharedData')
<p>三、事件总线（Event Bus）
事件总线是一种发布-订阅模式的通信方式，适用于非父子关系的组件通信。虽然 Vue 3 中不再推荐使用事件总线，但在某些简单场景下仍然可以使用。
创建事件总线：
js
// eventBus.js
import { createApp } from 'vue'
const app = createApp({})
export const eventBus = app.config.globalProperties.$eventBus = new Vue()
组件A 发送事件：
vue
<button>Send Message</button>
</p>
import { eventBus } from './eventBus'
const sendMessage = () => {
eventBus.$emit('custom-event', 'Hello from Component A')
}
<p>组件B 接收事件：
vue
<div>{{ message }}</div>
</p>
import { ref, onMounted, onUnmounted } from 'vue'
import { eventBus } from './eventBus'
let message = ref('')
onMounted(() => {
eventBus.$on('custom-event', (data) => {
message.value = data
})
})
onUnmounted(() => {
eventBus.$off('custom-event')
})
<p>四、Vuex 或 Pinia
对于复杂的多组件通信和状态管理，使用 Vuex 或 Pinia 是更好的选择。Pinia 是 Vue 3 的官方推荐状态管理库，具有更好的 TypeScript 支持和更简洁的 API。
安装 Pinia：
bash
npm install pinia
创建 Store：
js
// store.js
import { defineStore } from 'pinia'</p>
<p>export const useMainStore = defineStore('main', {
state: () => ({
count: 0,
}),
actions: {
increment() {
this.count++
},
},
})
使用 Store：
vue
<div>
<p>Count: {{ count }}</p>
<button>Increment</button>
</div>
</p>
import { useMainStore } from './store'
import { storeToRefs } from 'pinia'
const mainStore = useMainStore()
const { count } = storeToRefs(mainStore)
const increment = () => {
mainStore.increment()
}
<p>通过以上几种方式，你可以在 Vue 3 中实现不同场景下的组件通信和方法调用。根据实际需求选择合适的通信方式，可以让你的应用更加灵活和可维护。
