vue兄弟传递方法案例

在Vue中，兄弟组件之间的通信可以通过父组件作为中介来实现。具体方法如下：

1. 在父组件中定义一个数据属性或方法，用于存储需要传递的数据或执行需要传递的方法。

2. 在兄弟组件中通过`props`属性接收父组件传递的数据。

3. 在兄弟组件中通过`$emit`方法触发一个自定义事件，并将需要传递的数据作为参数传递给父组件。

4. 在父组件中监听兄弟组件触发的自定义事件，并在事件处理函数中调用需要执行的方法或更新需要传递的数据。

下面是一个简单的例子：

<!-- 父组件 -->
<template>
  <div>
    <child-a :data="data" @changeData="handleChangeData"></child-a>
    <child-b :data="data"></child-b>
  </div>
</template>

<script>
export default {
  data () {
    return {
      data: ''
    }
  },
  methods: {
    handleChangeData (data) {
      this.data = data
    }
  }
}
</script>

<!-- 子组件A -->
<template>
  <div>
    <button @click="handleClick">修改数据</button>
  </div>
</template>

<script>
export default {
  props: ['data'],
  methods: {
    handleClick () {
      this.$emit('changeData', '新的数据')
    }
  }
}
</script>

<!-- 子组件B -->
<template>
  <div>
    <p>{{data}}</p>
  </div>
</template>

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

在上面的例子中，父组件中定义了一个`data`属性，用于存储需要传递的数据，并定义了一个`handleChangeData`方法，用于更新`data`属性。

子组件A中通过`$emit`方法触发了一个名为`changeData`的自定义事件，并将新的数据作为参数传递给父组件。

子组件B通过`props`属性接收父组件传递的数据，并将其展示在页面上。由于父组件中的`data`属性被更新了，因此子组件B中展示的数据也会随之更新。