vue中如何调用其他组件的方法

在Vue中，要调用其他组件的方法，需要使用以下几种方式：

1. 使用`$refs`：可以通过`$refs`引用其他组件，并直接调用其方法。在父组件中，给子组件添加一个ref属性，然后可以通过`this.$refs`来访问子组件，并调用其方法。

示例：

<template>
  <div>
    <child-component ref="childRef"></child-component>
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.childRef.childMethod();
    }
  }
}
</script>

2. 使用事件总线：可以通过创建一个Vue实例作为事件总线，允许组件之间进行通信。在需要调用方法的组件中，通过事件总线触发一个自定义事件，并在目标组件中监听该事件并执行相应的方法。

示例：

// EventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

// ComponentA.vue
<script>
import { EventBus } from './EventBus.js';

export default {
  methods: {
    callMethodInComponentB() {
      EventBus.$emit('callMethodInComponentB');
    }
  }
}
</script>

// ComponentB.vue
<script>
import { EventBus } from './EventBus.js';

export default {
  created() {
    EventBus.$on('callMethodInComponentB', () => {
      this.targetMethod();
    });
  },
  methods: {
    targetMethod() {
      // 调用目标方法
    }
  }
}
</script>

3. 使用Vuex：如果你在Vue中使用了Vuex，可以将需要调用的方法定义在Vuex的actions中，然后在组件中通过dispatch来分发该方法。

示例：

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {
    targetMethod() {
      // 调用目标方法
    }
  }
});

// ComponentA.vue
<script>
import { mapActions } from 'vuex';

export default {
  methods: {
    ...mapActions(['targetMethod']),
    callMethodInStore() {
      this.targetMethod();
    }
  }
}
</script>

这些是在Vue中调用其他组件方法的常用方式，根据具体的场景选择合适的方法来实现。