vue获取兄弟组件的值

在 Vue 中获取兄弟组件的值可以通过以下两种方式实现：

1. 通过父组件作为中介，通过 props 将数据传递给兄弟组件

在父组件中，将需要传递给兄弟组件的数据通过 props 传递给兄弟组件，在兄弟组件中通过 props 接收父组件传递的数据。

父组件示例代码：

<template>
  <div>
    <brother-component :data="data"></brother-component>
    <button @click="changeData">改变数据</button>
  </div>
</template>

<script>
import BrotherComponent from './BrotherComponent.vue'

export default {
  components: {
    BrotherComponent
  },
  data() {
    return {
      data: 'hello'
    }
  },
  methods: {
    changeData() {
      this.data = 'world'
    }
  }
}
</script>

兄弟组件示例代码：

<template>
  <div>{{ data }}</div>
</template>

<script>
export default {
  props: {
    data: String
  }
}
</script>

2. 使用 $parent 或 $root 访问父或根实例

在兄弟组件中，可以通过 this.$parent 或 this.$root 访问到父组件或根实例，从而获取兄弟组件的值。

兄弟组件示例代码：

<template>
  <div>{{ siblingData }}</div>
</template>

<script>
export default {
  computed: {
    siblingData() {
      return this.$parent.data
    }
  }
}
</script>

需要注意的是，使用 $parent 或 $root 访问父组件或根实例的方式可能会造成代码的耦合性较强，建议使用 props 的方式进行数据传递。