怎么在B.vue中调用A.vue中的method

要在 `B.vue` 中调用 `A.vue` 中的方法，你需要使用 Vue.js 的组件通信机制。有几种方法可以实现这个目标：

1. 使用父子组件通信：如果 `B.vue` 是 `A.vue` 的直接父组件，你可以通过在 `B.vue` 的模板中使用自定义事件，然后在 `A.vue` 中触发该事件来调用 `A.vue` 中的方法。

在 `B.vue` 的模板中：

   <template>
     <div>
       <button @click="callAMethod">调用A.vue中的方法</button>
     </div>
   </template>

在 `B.vue` 的脚本中：

   <script>
   export default {
     methods: {
       callAMethod() {
         this.$emit('call-a-method');
       }
     }
   }
   </script>

在 `A.vue` 的模板中：

   <template>
     <div>
       <p>A.vue组件</p>
     </div>
   </template>

在 `A.vue` 的脚本中：

   <script>
   export default {
     methods: {
       handleCallAMethod() {
         // 在这里编写需要在B.vue中调用的方法逻辑
         console.log('A.vue中的方法被调用了');
       }
     },
     mounted() {
       this.$on('call-a-method', this.handleCallAMethod);
     }
   }
   </script>

2. 使用事件总线：如果 `B.vue` 和 `A.vue` 不是父子组件关系，你可以使用 Vue.js 的事件总线机制来进行通信。

在 `main.js` 中创建一个事件总线：

   import Vue from 'vue';
   export const eventBus = new Vue();

在 `B.vue` 的脚本中发送事件：

   <script>
   import { eventBus } from '@/main';

   export default {
     methods: {
       callAMethod() {
         eventBus.$emit('call-a-method');
       }
     }
   }
   </script>

在 `A.vue` 的脚本中监听事件：

   <script>
   import { eventBus } from '@/main';

   export default {
     methods: {
       handleCallAMethod() {
         // 在这里编写需要在B.vue中调用的方法逻辑
         console.log('A.vue中的方法被调用了');
       }
     },
     mounted() {
       eventBus.$on('call-a-method', this.handleCallAMethod);
     }
   }
   </script>

这样就可以在 `B.vue` 中调用 `A.vue` 中的方法了。注意，在使用事件总线时，要确保事件名称唯一且一致。