vue兄弟组件之间的传参和调用方法

Vue兄弟组件之间的传参和调用方法有多种方式可以实现。

一种常见的方式是通过父组件作为中介，将数据传递给兄弟组件。具体步骤如下：

1. 在父组件中定义一个数据属性，并将其作为 prop 传递给两个兄弟组件。
2. 在父组件中监听需要传递的数据变化，并将其传递给对应的兄弟组件。
3. 在兄弟组件中使用 props 接收传递过来的数据。

示例代码如下：

// 父组件
<template>
  <div>
    <child-component-1 :dataProp="sharedData"></child-component-1>
    <child-component-2 :dataProp="sharedData"></child-component-2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sharedData: '' // 定义共享数据
    }
  },
  methods: {
    updateData(data) { // 监听数据变化
      this.sharedData = data;
    }
  }
}
</script>

// 子组件1
<template>
  <div>
    <p>{{ dataProp }}</p>
    <button @click="updateParentData">更新数据</button>
  </div>
</template>

<script>
export default {
  props: ['dataProp'],
  methods: {
    updateParentData() {
      this.$parent.updateData('新的数据'); // 调用父组件方法更新数据
    }
  }
}
</script>

// 子组件2
<template>
  <div>
    <p>{{ dataProp }}</p>
  </div>
</template>

<script>
export default {
  props: ['dataProp']
}
</script>

通过上述方式，子组件1可以通过调用父组件方法更新数据，然后父组件将更新后的数据传递给兄弟组件2，实现了兄弟组件之间的数据传递和调用方法。