vue2兄弟组件调用方法

在 Vue 2 中，兄弟组件之间的通信可以通过事件总线、Vuex 或者通过父组件作为中介来实现。以下是三种方法的示例：

1. 事件总线：
在父组件中创建一个事件总线，子组件通过事件总线来通信。

父组件：

// 创建事件总线
const eventBus = new Vue();

export default {
  // ...
  methods: {
    emitEvent() {
      // 发送事件
      eventBus.$emit('event-name', data);
    }
  }
}

兄弟组件1：

export default {
  // ...
  created() {
    // 监听事件
    eventBus.$on('event-name', this.handleEvent);
  },
  methods: {
    handleEvent(data) {
      // 处理事件
    }
  }
}

兄弟组件2：

export default {
  // ...
  created() {
    // 监听事件
    eventBus.$on('event-name', this.handleEvent);
  },
  methods: {
    handleEvent(data) {
      // 处理事件
    }
  }
}

2. 使用 Vuex：
通过 Vuex 状态管理库来共享数据和调用方法。

在 Vuex store 中定义一个方法，供兄弟组件调用：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    // ...
  },
  mutations: {
    // ...
  },
  actions: {
    methodName({ commit }, payload) {
      // 方法逻辑
    }
  }
});

export default store;

兄弟组件1：

export default {
  // ...
  methods: {
    callMethod() {
      // 调用方法
      this.$store.dispatch('methodName', data);
    }
  }
}

兄弟组件2：

export default {
  // ...
  methods: {
    callMethod() {
      // 调用方法
      this.$store.dispatch('methodName', data);
    }
  }
}

3. 父组件作为中介：
通过父组件作为中介，将方法传递给子组件来实现调用。

父组件：

export default {
  // ...
  methods: {
    methodName(data) {
      // 方法逻辑
    }
  }
}

兄弟组件1：

export default {
  // ...
  methods: {
    callMethod() {
      // 调用父组件的方法
      this.$parent.methodName(data);
    }
  }
}

兄弟组件2：

export default {
  // ...
  methods: {
    callMethod() {
      // 调用父组件的方法
      this.$parent.methodName(data);
    }
  }
}

以上三种方法都可以实现兄弟组件之间的调用。根据你的具体需求，选择适合的方式来实现兄弟组件的通信。