vue3跨组件调用方法

在Vue 3项目开发中，实现不同组件间的方法调用是一个常见的需求。为了实现这一目标，我们可以采用以下几种解决方案：使用provide和inject、事件总线（Event Bus）、Vuex状态管理或者ref和defineExpose等新特性。

1. 使用provide和inject

这是一种父子组件通信的方式，但也可以用于跨越多层嵌套组件的场景。

javascript
// 父组件 Parent.vue</p>


import { provide } from 'vue'

const sayHello = () => {
  console.log('Hello from parent')
}

provide('sayHello', sayHello)


<p>
  
</p>

<p>// 子组件 ChildComponent.vue</p>


import { inject } from 'vue'

const sayHello = inject('sayHello')

// 调用父组件的方法
sayHello()


<p>

2. 事件总线（Event Bus）

对于没有直接父子关系的组件，可以创建一个全局事件总线来实现通信。

javascript
// 创建 eventBus.js
import { createApp } from 'vue'
const app = createApp({})
export const eventBus = app.config.globalProperties.eventBus = new Vue()</p>

<p>// 组件A中触发事件
eventBus.$emit('custom-event', data)</p>

<p>// 组件B中监听事件
eventBus.$on('custom-event', (data) => {
  // handle event
})

注意：Vue 3官方不再推荐使用事件总线，建议优先考虑其他方案。

3. Vuex状态管理

当需要多个组件共享状态并进行操作时，使用Vuex是最合适的选择。

javascript
// store/index.js
import { createStore } from 'vuex'</p>

<p>export default createStore({
  state: {},
  mutations: {
    someMutation(state, payload) {}
  },
  actions: {
    async someAction({ commit }, payload) {
      commit('someMutation', payload)
    }
  }
})</p>

<p>// 在组件中使用
this.$store.dispatch('someAction', data)

4. ref和defineExpose组合

这是Vue 3的新特性，适用于子组件暴露特定方法给父组件调用。

javascript
// 子组件 ChildComponent.vue</p>


import { defineExpose } from 'vue'

const customMethod = () => {
  console.log('This is exposed method')
}

defineExpose({
  customMethod
})


<p>// 父组件 Parent.vue</p>


import { ref, onMounted } from 'vue'
import ChildComponent from './ChildComponent.vue'

const childRef = ref(null)

onMounted(() => {
  childRef.value.customMethod()
})


<p>
  

以上就是Vue 3中实现跨组件调用方法的主要方式，具体选择哪种取决于项目的实际情况和组件之间的关系。提供这几种思路可以帮助开发者根据实际需求选择最适合的方案。