vue3 兄弟页面调用方法

在 Vue 3 项目中，兄弟组件（页面）之间进行方法调用是一个常见的需求。要实现这一功能，可以借助Vuex、事件总线或通过父组件中转等方式。其中最推荐使用官方提供的Composition API配合provide/inject的方式或者 Vuex 进行状态管理来解决。

一、使用Vuex实现

安装vuex
如果还没有安装Vuex的话，可以通过npm install vuex@next --save命令安装。
创建store

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

<p>export default createStore({
  state: {
    message:''
  },
  mutations: {
    setMessage(state, payload){
      state.message = payload;
    }
  },
  actions: {
    sendMessage({commit},payload){
      commit('setMessage',payload);
    }
  }
})

在发送消息的兄弟页面定义方法并调用action

javascript

  <div>
    <!-- 点击按钮后触发sendMessage -->
    <button>给兄弟发消息</button>
  </div>
</p>


import { useStore } from 'vuex';
export default {
  setup(){
    const store = useStore();
    const sendMessage = ()=>{
      store.dispatch('sendMessage','你好啊');
    }
    return{
      sendMessage
    }
  }
}


<p>

在接收消息的兄弟页面监听state的变化

javascript

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


import {computed} from 'vue';
import {useStore} from 'vuex';
export default {
  setup(){
    const store = useStore();
    const message = computed(()=>store.state.message);
    return{
      message
    }
  }
}


<p>

二、通过父组件中转

父组件定义方法和子组件传值相关逻辑

html
<!-- ParentComponent.vue -->

  
  
</p>


import ChildOne from './ChildOne.vue';
import ChildTwo from './ChildTwo.vue';
export default {
  components:{
    ChildOne,
    ChildTwo
  },
  methods:{
    handleSendMsg(msg){
      this.$refs.childTwo.receiveMessage(msg);
    }
  }
}


<p>

发送消息的兄弟页面（ChildOne.vue）

html

  <div>
    <button>给兄弟发消息</button>
  </div>
</p>


export default {
  methods:{
    sendMessage(){
      this.$emit('sendMsgToBrother','来自哥哥的消息');
    }
  }
}


<p>

接收消息的兄弟页面（ChildTwo.vue）

html

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


export default {
  data(){
    return{
      message:''
    }
  },
  methods:{
    receiveMessage(msg){
      this.message = msg;
    }
  }
}


<p>

以上两种方式都可以很好地实现Vue3兄弟页面之间的方法调用，在实际开发中可以根据项目的需求和复杂程度选择合适的方式。