vue 如何调用兄弟组件的方法

在Vue中调用兄弟组件的方法有多种方式。其中一种方式是通过在父组件中定义一个事件，然后在子组件中触发该事件来实现兄弟组件之间的通信。具体步骤如下：

1. 在父组件中定义一个事件，例如`callSiblingMethod`。

2. 在父组件中引入两个子组件，并在子组件的模板中触发父组件的事件。

3. 在子组件中通过`this.$parent.$emit`来触发父组件的事件，同时传递需要调用的兄弟组件的方法名。

4. 在父组件中监听子组件触发的事件，并根据传递的方法名调用对应的兄弟组件的方法。

下面是一个示例代码：

// 父组件
<template>
  <div>
    <child1 @callSiblingMethod="callSiblingMethod"></child1>
    <child2 @callSiblingMethod="callSiblingMethod"></child2>
  </div>
</template>

<script>
import Child1 from './Child1.vue'
import Child2 from './Child2.vue'

export default {
  components: {
    Child1,
    Child2
  },
  methods: {
    callSiblingMethod(methodName) {
      // 根据传递的方法名调用兄弟组件的方法
      if (methodName === 'methodInChild1') {
        this.$refs.child1.methodInChild1()
      } else if (methodName === 'methodInChild2') {
        this.$refs.child2.methodInChild2()
      }
    }
  }
}
</script>

// 子组件1
<template>
  <div>
    <!-- 触发父组件的callSiblingMethod事件，并传递方法名 -->
    <button @click="$parent.$emit('callSiblingMethod', 'methodInChild1')">调用兄弟组件2的方法</button>
  </div>
</template>

<script>
export default {
  methods: {
    methodInChild1() {
      // 兄弟组件1的方法
      console.log('调用了兄弟组件1的方法')
    }
  }
}
</script>

// 子组件2
<template>
  <div>
    <!-- 触发父组件的callSiblingMethod事件，并传递方法名 -->
    <button @click="$parent.$emit('callSiblingMethod', 'methodInChild2')">调用兄弟组件1的方法</button>
  </div>
</template>

<script>
export default {
  methods: {
    methodInChild2() {
      // 兄弟组件2的方法
      console.log('调用了兄弟组件2的方法')
    }
  }
}
</script>