Vue3同级组件调用方法

在Vue3项目开发中，经常会遇到同级组件之间需要互相调用方法的需求。解决这一问题的方案主要是通过共享状态管理或者事件总线的方式来进行。

一、使用Provide/Inject

对于同级组件之间的方法调用，可以借助provide和inject来实现。先创建一个父组件，在父组件中提供一个公共的方法，并且将这个方法注入到子组件中。

html
<!-- 父组件 -->

  <div>
    
    
  </div>
</p>


import Child1 from './Child1.vue'
import Child2 from './Child2.vue'

const commonMethod = () => {
  console.log('这是父组件提供的公共方法')
}

provide('commonMethod', commonMethod)


<p>

html
<!-- Child1组件 -->

  <div>
    <button>点击调用公共方法</button>
  </div>
</p>


import { inject } from 'vue'

const commonMethod = inject('commonMethod')

const callCommonMethod = () => {
  commonMethod()
}


<p>

html
<!-- Child2组件 -->

  <div>
    <!-- 也可以调用该公共方法 -->
  </div>
</p>


import { inject } from 'vue'

const commonMethod = inject('commonMethod')


<p>

二、事件总线（mitt库）

如果不想依赖父子层级关系，可以使用事件总线。安装mitt库：npm install mitt。

然后创建一个事件总线文件bus.js：

javascript
// bus.js
import mitt from 'mitt'
const bus = mitt()</p>

<p>export default bus

接下来在组件中使用：

html
<!-- ComponentA.vue -->

  <div>
    <button>发送消息给ComponentB</button>
  </div>
</p>


import bus from './bus'

const sendMessage = () => {
  bus.emit('customEvent', '这是来自ComponentA的消息')
}


<p>

html
<!-- ComponentB.vue -->

  <div>
    {{ message }}
  </div>
</p>


import { ref, onMounted, onUnmounted } from 'vue'
import bus from './bus'

const message = ref('')

const handleEvent = (msg) => {
  message.value = msg
}

onMounted(() => {
  bus.on('customEvent', handleEvent)
})

onUnmounted(() => {
  bus.off('customEvent', handleEvent)
})


<p>

三、Vuex状态管理（适用于较复杂场景）

当项目规模较大时，可以使用Vuex进行状态管理。定义好action或mutation等操作，在同级组件中分别进行分发和响应。

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

<p>export default createStore({
  state: {},
  mutations: {
    updateMessage(state, payload) {
      // 处理逻辑
    }
  },
  actions: {
    triggerUpdate({ commit }, payload) {
      commit('updateMessage', payload)
    }
  }
})

在组件中使用：

html
<!-- ComponentX.vue -->

  <div>
    <button>触发Vuex中的action</button>
  </div>
</p>


import { useStore } from 'vuex'

const store = useStore()

const triggerAction = () => {
  store.dispatch('triggerUpdate', '参数')
}


<p>

html
<!-- ComponentY.vue -->

  <div>
    <!-- 监听state的变化或者接收特定的事件 -->
  </div>
</p>


import { useStore, computed } from 'vue'

const store = useStore()

// 根据需求监听相关数据
const someData = computed(() => store.state.someProperty)


<p>

以上就是Vue3同级组件调用方法的一些常见思路，可以根据实际项目需求选择合适的方式。