vue同级组件间方法调用

在Vue中，同级组件之间的方法调用可以通过事件总线(Event Bus)来实现。事件总线是一个空的Vue实例，可以用它来触发事件和监听事件。具体实现步骤如下：

1.在main.js中创建事件总线：

Vue.prototype.$bus = new Vue()

2.在发送事件的组件中，使用$emit方法触发事件：

this.$bus.$emit('eventName', data)

3.在接收事件的组件中，使用$on方法监听事件：

this.$bus.$on('eventName', (data) => {
  // 处理事件
})

举个例子，假设我们有两个同级组件A和B，现在需要在组件A中调用组件B的方法。具体实现步骤如下：

1.在组件B中定义一个方法：

methods: {
  doSomething() {
    // 处理逻辑
  }
}

2.在组件A中触发事件：

this.$bus.$emit('callDoSomething')

3.在组件B中监听事件并调用方法：

mounted() {
  this.$bus.$on('callDoSomething', () => {
    this.doSomething()
  })
}

相关问题

vue中同级组件调用方法

在Vue中，同级组件之间的通信可以通过props和事件来实现。如果组件A要调用组件B的方法，可以在组件A中使用$refs来获取组件B的实例，并调用其方法。

例如，假设有两个同级组件A和B，B组件中有一个名为doSomething的方法，A组件想要调用B组件的doSomething方法，可以按照如下步骤操作：

1. 在B组件中给doSomething方法添加一个ref属性，如下所示：

<template>
  <div ref="myCompB">
    <!-- B组件的内容 -->
  </div>
</template>

<script>
export default {
  name: 'compB',
  methods: {
    doSomething() {
      // B组件的doSomething方法
    }
  }
}
</script>

2. 在A组件中使用$refs获取B组件的实例，并调用其doSomething方法，如下所示：

<template>
  <div>
    <!-- A组件的内容 -->
    <button @click="callCompBMethod">调用B组件的方法</button>
  </div>
</template>

<script>
export default {
  name: 'compA',
  methods: {
    callCompBMethod() {
      // 获取B组件的实例
      const compB = this.$refs.myCompB;
      // 调用B组件的doSomething方法
      compB.doSomething();
    }
  }
}
</script>

这样，当A组件中的按钮被点击时，就会调用B组件的doSomething方法。

vue2 同级组件调用方法

在 Vue.js 2 中，同级组件之间的通信通常通过事件系统或者自定义属性（prop）来完成，而不是直接调用对方的方法。这里简单介绍两种常见的方式：

1. **事件（Event Bus）**:
如果组件A需要触发某个操作并让组件B响应，可以使用Vue官方推荐的事件总线（event bus）模式。创建一个独立的Vue实例作为事件中心，发布事件时，`this.$emit('eventName', data)`；而在组件B上监听这个事件，`this.$on('eventName', (data) => { ... })`。

2. **自定义属性（Prop）**:
直接在 prop 中传递一个函数，然后在接收端调用它。例如，在组件A中，你可以将一个方法通过 prop 传给组件B：

   <template>
     <b :call-me="myMethodToPass" />
   </template>

   <script>
   export default {
     methods: {
       myMethodToPass(data) {
         // 在这里执行你需要的操作
       }
     }
   };
   </script>

然后在组件B里：

   <template>
     <button @click="parentCallMe">调用我的方法</button>
   </template>

   <script>
   import { mapActions } from 'vuex';
   
   export default {
     methods: {
       parentCallMe() {
         this.callMe();
       },
       ...mapActions(['myAction']) // 如果来自Vuex store
     },
     props: {
       callMe: { type: Function, required: true }
     }
   };
   </script>